A menu is a list of available choices. A dropdown menu is a menu that hides its contents by default and only shows its contents when it is clicked or hovered on the navbar. The dropdown menu is used to maximize space for the navbar on small screen sizes or mobile devices. The implementation of a dropdown menu is mostly done by a click event listener. But CSS has a workaround for it.
I will be sharing my knowledge on a step-by-step procedure for creating a dropdown menu using HTML and CSS.
This is a beginner-friendly guide. Much knowledge of HTML and CSS is not required to follow through. I assume you already know how to create files in your code editor. Let's get right to it.
Create your files
You need two files to get started with this project.
The HTML file
The CSS file
Check out this article if you don't know how to create files in a folder using VSCode. If you are not satisfied, feel free to google. Once you are done with creating the files, you are set.
Note: I prefer using an external style sheet to inline styles. The external style sheet organizes my files better. My stylesheet for this tutorial is named
style.css. You can choose any name of your choice but don't forget to add the .css file extension.
Working on the HTML file
In the index.html file, you need the following:
Two menu markups:
- The main menu markup
- The dropdown menu markup
A button or a dropdown icon or even an image. Whatever works for you.
Main menu HTML markup
Add the following markup to your index.html file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My html and css dropdown menu</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="navbar">
<div class="navlinks-container">
<a class="navbar-links" href="#home">Home</a>
<a class="navbar-links" href="#skills">Skills</a>
<a class="navbar-links" href="#projects">Projects</a>
<a class="navbar-links" href="#contact">Contact</a>
</div>
</div>
</body>
</html>
The markup above created a navigation bar and a list of navbar links in a div container. The main container has an id of navbar. The div container has a class of navlinks-container container while the links have a class of navbar-links.
Use the id and classes to style the navbar as shown below.
Main menu CSS styles
Add the following CSS styles to your style.css file to give the navbar a good look.
/*set your universal style(styles that apply to every element on the page)*/
*{
margin: 0;
padding: 0;
box-sizing: border-box;
overflow-x: hidden;
font: 18px/1.5 Arial, Helvectica, sans-serif;
}
/*style the navbar*/
#navbar {
background-color: #35424a;
position: fixed;
width: 100%;
color: #ffffff;
border-bottom: #e8491d 3px solid;
top: 0;
z-index: 1;
overflow: visible;
}
.navlinks-container{
float: right;
}
#navbar .navbar-links {
float: left;
font-size: 25px;
color: #f4f4f4;
text-align: center;
padding: 20px;
text-decoration: none;
}
If you have followed these steps, the navbar should look like the image below👇.
The dropdown menu markup
Next is to add the dropdown menu items. Add the following markup to your index.html file.
<body>
<div id="navbar">
//the former codes go here
<div class="dropdown">
<button class="dropbtn">MENU</button>
<div class="dropdown-content">
<a class="dropdown-links" href="#home">Home</a>
<a class="dropdown-links" href="#skills">Skills</a>
<a class="dropdown-links" href="#projects">Projects</a>
<a class="dropdown-links" href="#contact">Contact</a>
</div>
</div>
</div>
</body>
The markup above created a button and a list of navbar links in another div container. This div container has a class of dropdown container while the button has a class of dropbtn. The links have a class of navbar-links. All the links are in a div with a class of dropdown-content. This markup should go below the previous markup, but still inside the navbar div.
The dropdown menu styles
Add the following CSS styles to your styles.css file for the dropdown menu.
.dropdown {
position: relative;
float: right;
overflow: visible;
}
.dropdown .dropbtn {
display: block;
font-size: 20px;
border: none;
outline: none;
color: white;
padding: 20px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
#navbar .navbar-links:hover,
.dropdown:hover .dropbtn {
background-color: #e8491d;
}
.dropdown-content {
display: block;
position: absolute;
background-color: #35424a;
font-size: 18px;
padding: 0px;
margin: 0;
width: 130px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content .dropdown-links {
display: block;
color: #f4f4f4;
text-align: center;
padding: 7px;
text-decoration: none;
}
.dropdown-content .dropdown-links:hover {
background-color: #ddd;
color: #e8491d;
}
With the above styles added, our navbar now looks like the image below👇. Notice that the dropdown button, dropdown content, dropdown links are all displayed block. And that's why it's showing on the navbar with other navbar links/items.
You can take your cursor over the navbar links to see the hovering effect on your server.
But, you cannot have it displayed like that on our webpage(that's odd🙍♀️). So, you should rather hide the dropdown contents so our page looks better. To do this, change the display of the dropdown content to none, like in the code snippet below.
.dropdown-content {
display: none;
//other codes go here
}
Hide the dropdown button by default
You are almost there! Remember that your aim for adding this dropdown menu is to utilize it only on mobile devices. Therefore, for a large screen which is the default style, you have to hide the menu button too.
.dropdown .dropbtn {
display: none;
//other codes go here
}
If you check the page now, your navbar is looking like the image below👇.
Add media queries
Now, here is the real deal. You want to be able to hide the main navbar links when you are on a small screen and display the dropdown menu button instead. So, to achieve this, add the following css styles.
@media (max-width: 500px) {
#navbar .navbar-links {
display: none; /*hide the main menu on small screen*/
}
.dropdown .dropbtn {
display: block; /*display the dropdown menu button on small screen*/
}
}
Show the dropdown menu content on button hover
You can try resizing your screen (if you are working with a pc) to see it at work. There's one more thing, though. The dropdown menu contents should be able to show when hovered on a small screen. Now, add the following CSS style to the media query.
@media (max-width: 500px) {
//the former codes go here
.dropdown:hover .dropdown-content {
display: block;
}
}
Now your hoverable dropdown menu is ready and very responsive. Congratulations! You did well right there.👍
Conclusion
CSS hoverable dropdown menu is handy when you do not have good JavaScript knowledge to create a clickable one and it is beginner-friendly. I hope this article has been able to help you learn how to create one yourself. You can practice it as often as possible to master it. Also, feel free to play with the styles to see how it works.
Resources
If you liked this article, please give your reaction, comment and share. You can also reach me on Twitter