Pure CSS hover dropdown menu
This tutorial is about how to create a simple dropdown menu using pure CSS. I know there are plenty of tutorials out there explaining the same thing but I tried to explain the things very simply especially for beginners. So let’s begin.
This is the link for a working example https://codepen.io/nandun_malinda/pen/LvWpgL#code-area
This is the HTML file for our dropdown menu example. Don’t worry. I’ll explain everything after a short while. Just go through the code and try whether you can understand the code by yourself or not. If you can’t, it’s totally fine and I was the same boat as you.
First 6 lines of codes are just HTML codes generated by my code editor and you don’t need to worry much about that. (If you really need this explanation as well, put it on the comment below)
In line number 7 I loaded the Open-Sans font from google fonts. This is completely optional and you can use either default font or you can use another font library as you wish.
Line number 8 is for loading my custom CSS file (styles.css). In this case, both files (index.html and styles.css) are located on the same level, so I can just call my CSS file without any prefixes for folders.
Our actual and important code is starting with line number 13. In here I created a wrapper for our dropdown menu. This is optional, but I always recommend this since we can style the whole menu as we wish.
In line number 14 a new ul (unordered list) is created for our menu and put a class for that called “menu”.
In line number 15 we create a li (list item)under the ul, so we can use this for creating our actual menu links. Inside that, we create a (anchor tag) tag. Currently, we don’t have any reference for these links. You can add any reference to those a tags inside href attributes.
In line 17 we create another ul with class “drop-menu”. This is for our actual dropdown menu which is visible when hovering the menu item called “Pages”.
Inside that, string line number 18, same thing as above with the class name of “drop-menu-item”.
You can save this file as index.html and open it using your favourite browser. I guess your reaction should be like this:-
I know that because we don’t have any CSS for our dropdown menu. So, let’s begin the fun part.
Here is the CSS file for our newly created dropdown menu. Create a CSS file called “styles.css” at the same level as “index.html” and paste the following codes inside.
In line 2, I add the Open Sans font for the body. I remove the default bullets, paddings and margins which default for ul in line number 6, 7 and 8.
The key thing here to understand is we need to hide the dropdown menu when loading the page and only display that by hovering the corresponding menu item which is “Pages” in our case.
In line 25, I hide the dropdown menu and in line number 45, I show that when the user hovers over the menu item.
Please note that our parent menu item (.menu-item) need to have position relative (line number 14) and child menu inside it (.drop-menu) need to have the position absolute (line number 26) in order to align the menus correctly.
I believe other styles are obvious and if you need any clarifications I’m always happy to help. Please add them to the comments section.
Now is the time to refresh the browser and see the goodies.
Hope you all enjoy the article and please add comments if you have any thoughts and click the 👏 👏 👏 button. Thanks for reading 🙏
