Learn html, css, javascript online and how to make a webpage design

How to build Dropdown Menu with only CSS and HTML?

Thursday 7th of January 2021 11:02:39 PMMenuHTMLCSS

If you are a website programming enthusiast and your orientation is a front-end developer, you will often have to design all kinds of drop-down, horizontal and vertical menus. But have you ever designed a drop-down menu using only html and css without javascript intervention.

In this article we will fully utilize the power of input tags and labels combined with css. You see the example below:

Dropdown menu only CSS and HTML

<!DOCTYPE html>
<html>
<head>
    <title>How to build Dropdown Menu with only CSS and HTML? - HtmlcssDownload.com</title>
    <style>
        body{display: flex;align-items: center;justify-content: center;min-height: 100vh;background: #eee;font-family: Arial, Helvetica, sans-serif;}
        .box{width: 500px;padding:20px;background: #fff;border-radius: 20px;}
        .box .title{text-align: center;font-size: 19px;font-weight: bold;margin-bottom: 20px;}
        .box label{height:40px;width: 100%;background: #eee;border:1px solid #e1e1e1;display: flex;align-items: center;padding:0px 10px;box-sizing: border-box;cursor: pointer;border-radius: 4px;position: relative;user-select: none;}
        .box label ul{position: absolute;top:100%;left: 0px;right:0px;background:#fafaf7;margin:0px;padding:0px;opacity: 0;max-height: 0;overflow: hidden;transition: all 0.3s;-webkit-transition: all 0.3s;}
        .box label ul li{display: block;}
        .box label ul li a{display: flex;height: 36px;align-items: center;border-bottom: 1px solid #eee;padding:0px 10px;color:#333;}
        .box label input:checked ~ ul{opacity: 1;max-height: 9999px;}
        .hide{display: none;}
    </style>
</head>
<body>
<div id="app">
    <div class="box">
        <div class="title">Dropdown Menu with only CSS and HTML</div>
        <label>
            Open Menu
            <input type="checkbox" class="hide" />
            <ul>
                <li><a href="">HTML</a></li>
                <li><a href="">CSS</a></li>
                <li><a href="">Javascript</a></li>
                <li><a href="">Python</a></li>
                <li><a href="">PHP</a></li>
            </ul>
        </label>
    </div>
</div>
    
</body>
</html>

Result for example

We are Recommending you: