How to build a dropdown menu with HTML and CSS only

There are some pretty cool things you can do with your CSS and HTML knowledge, especially if you're just starting so let me show you how to make a simple but effective dropdown menu.

It'll look like this, but you can customize it however you want:

final_62ae8079ac102e00919b64ce_63913

Watch the video

Let's start setting up our HTML document; we're going to need a nav element that contains our navigation links and the title to our menu, which is just going to be "menu".

<nav>
        <label for="open"> <span>Menu</span></label>
        <input type="checkbox" name="" id="open">

        <ul class="slide">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Products</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>

That's all the HTML we need. It's looking like this Screenshot (300)

Now for CSS, don't forget to link your styles sheet to your HTML document and let's start with some widths, color and margins; remember we're going to be working with our nav element directly since we didn't give it a class.

nav{
    width: 200px;
    margin: 20px; 
    background-color: rgba(239, 239, 240, 0.719);
    color: rgb(26, 25, 25); 
}

Next up is our span element, this is what holds our Menu title and what we'll use to open and close our menu, trust the process. Learn more on ::after pseudo-element


span{
    padding: 25px;
    cursor: pointer;
    display: block;
    text-align: center;
}
span::after{
    float: right;
    right: 5%;
    content: "+";
}

Let's work on those links, we can't have them being visible all the time, so let's hide them and take care of our sliding menu, giving it a transition that is going to give us a nice sliding effect.

.slide{
    width: 100%;
    height: 0px;
    overflow: hidden;
    transition: height .4s ease;
}

.slide li{
    padding: 10px;
}

Now we're left with an ughhhly checkmark box, so let's take care of it. Learn more about absolute, relative and fixed positioning


#open{
    position: absolute;
    height: 0;
}

#open:checked + .slide{
    height: 200px;
}

This is just for aesthetic purposes:

body{
    font-family: 'Roboto', sans-serif;
    font-weight: 500px;
}

ul{
    list-style: none;
}

li a {
    text-decoration: none;
    color: rgb(51, 51, 51);
}

So now you should have a fully functioning and fun dropdown menu!! Yey! You've made it, my friend :] final_62ae8079ac102e00919b64ce_63913

Full CSS code

body{
    font-family: 'Roboto', sans-serif;
    font-weight: 500px;
}

ul{
    list-style: none;
}

li a {
    text-decoration: none;
    color: rgb(51, 51, 51);
}

nav{
    width: 200px;
    margin: 20px; 
     background-color: rgba(239, 239, 240, 0.719);
    color: rgb(26, 25, 25); 
}

span{
    padding: 25px;
    cursor: pointer;
    display: block;
    text-align: center;
}
span::after{
    float: right;
    right: 5%;
    content: "+";
}

.slide{ 
    width: 100%;
    height: 0px;
    overflow: hidden;
    transition: height .4s ease;
}

.slide li{
    padding: 10px;
}


#open{
    position: absolute;
    height: 0;
}

#open:checked + .slide{
    height: 200px;
}

Thank you so much for reading, my friend! :] I really hope you learned something new today, if you have anything to add don't hesitate to leave a comment.

☕If you enjoy my content Buy me a coffee It'll help me continue making quality blogs💕