What is CSS dropdown Menu?
I am guessing, as you are reading this post, you might come here from some social link or from google, but you surely know what a css dropdown menu is. If somehow you don’t then, it is a little extension to the regular menu we see in every website. It’s the same menu where you can create level 2, level 3 and more level menus.
Mostly the menus are level 2 deep, it might get to level 3 sometimes. It is very unlikely to have a menu which is 4 level deep. Nobody wants a puzzle inside a menu, right? If you are a visitor and you have to go through 4 level deep for a menu item, you won’t like it. But the good news is, when you create a pure css dropdown menu, you only need to work with level 3 and the rest is automatically done. So, after this, it doesn’t matter how deep the menu is, it will work just fine no matter how many levels it has.
Creating CSS dropdown Menu
Creating a css dropdown menu is pretty easy thing to do but sometimes it might be tricky for new folks around. When I started developing and was looking to create a dropdown menu I often stuck at a point. But later I studied a little more about how things work in a dropdown menu and saw some examples, it was a piece of cake.
No jQuery for a menu, please
So, when you roam around for a dropdown menu, you might see some related searches like jQuery dropdown menu. You don’t need to do that. It would be like bringing a canon to fight a mosquito. Why jquery when you can simply create a css dropdown menu?
Marking up
Markup is very important. And it’s also not very fancy so everyone should end up with the same markup. First, let’s take some list items with links inside an unordered list then create lists inside those list items and so on and so forth.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Dropdown Menu</title> <link rel="stylesheet" href="style.css" /> </head> <body> <header> <nav class="main-menu"> <ul> <li><a href="">Home</a></li> <li><a href="">About</a> <ul> <li><a href="">Sub Menu</a></li> <li><a href="">Sub Menu</a></li> <li><a href="">Sub Menu</a></li> </ul> </li> <li><a href="">Services</a></li> <li><a href="">Customers</a> <ul> <li><a href="">Sub Menu</a></li> <li><a href="">Sub Menu</a> <ul> <li><a href="">Sub Menu</a></li> <li><a href="">Sub Menu</a></li> <li><a href="">Sub Menu</a></li> </ul> </li> <li><a href="">Sub Menu</a></li> </ul> </li> <li><a href="">Contact</a></li> </ul> </nav> </header> </body> </html>
CSS for the dropdown menu
First, let’s fix the first menu. Then we will go for the rest. In this portion just edit the first level.
.main-menu ul {
list-style: none;
position: relative;
float: left;
background-color: #202020;
margin: 0;
padding: 0;
}
.main-menu ul li {
position: relative;
float: left;
}
.main-menu ul li a{
display: block;
color: #fff;
text-decoration: none;
font-family: Segoe UI;
font-size: 18px;
padding: 10px 15px;
}
Now, target the second level.
.main-menu ul ul{
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: #202020;
}
.main-menu ul li:hover>ul{
display: block;
}
.main-menu ul ul li{
float: none;
width: 200px;
}
And at last, the third level
.main-menu ul ul ul{
top: 0;
left: 100%;
}
.main-menu ul li:hover{
background-color: #101010;
}
Additional support
This menu is just simple css dropdown menu but if you want to give it WordPress support, just add some additional classes like ‘current-menu-item’ and so on, so that when you take it to the WordPress, you don’t need to do same thing twice. And you can always use the same menu over and over again for all your websites.
I am sorry for adding those codes individually, might have been easier for you if it were all at once. But, not to worry, you can just copy and paste them, if you want to do it yourself, you are welcome too. As you can see the process was really easy. If you need more assistance, I have recorded a video of 11.57 YouTube video which will be the whole process literally. Please watch it, if it helps you in any way, like, share and subscribe to my YouTube Channel.
https://www.youtube.com/watch?v=cpy4EiNWD9A&feature=youtu.be
