The drop-down menu is a core feature of most modern websites. It is a group of navigational menu items in which clicking on an item expands a drop-down list. Since the menu expands towards the bottom, it is called a “drop-down menu.”
This tutorial will explain how you can develop your drop-down menus with CSS3 and HTML5 coding. We will not use JavaScript or jQuery!
So, let’s begin.
Create the HTML5 Drop-down menu markup
Step 1:
Create an HTML document and add the following line of code to it.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Drop Down Menu</title> <link rel="stylesheet" href="style.css"> </head> <body> </body> </html>
Step 2:
Create a <nav> tag inside the body tag.
Inside <nav> the tag, create an unordered list.
Give that list the ID of the “menu” and add some list items to the unordered list.
Your code should now look like the following snippet.
<body> <nav> <ul id="menu"> <li><a href="#">Home</a></li> <li><a href="#">About</a> </li> <li><a href="#">Services</a> </li> <li><a href="#">Contact Us</a></li> </ul> </nav> </body>
This will be the top-level menu.
It will contain four items: “Home,” “About,” “Services,” and “Contact Us.”
Step 3:
Under the “About” and “Services” list items created in Step 2, create one unordered list for each of those items and enter the below-mentioned list items within the nested unordered list.
The code in the body should now look like the following code snippet.
<body> <nav> <ul id="menu"> <li><a href="#">Home</a></li> <li> <a href="#">About</a> <ul> <li><a href="#">History</a></li> <li><a href="#">Mission</a></li> </ul> </li> <li> <a href="#">services</a> <ul> <li><a href="#">Web Development</a></li> <li><a href="#">Web Designing</a></li> <li><a href="#">Mobile Apps</a></li> </ul> </li> <li><a href="#">Contact Us</a></li> </ul> </nav> </body>
If the HTML page with the above code is viewed in a browser, it will look like this:
Style the Drop-down menu with CSS3
However, we want only the top-level elements to appear on one line, and when the cursor is hovered over those items, the nested list items should appear in the form of a drop-down menu. This will be done via CSS.
Create a new CSS file named “style.css” and place it in the same directory where the HTML, created in the initial steps, is placed.
Add the markup, shown below, to the CSS file. The markup has been explained under each code snippet.
Step 4:
ul{
padding: 0;
margin: 0;
list-style-type: none;
}
This above markup will remove padding and margin from all unordered lists from the HTML code.
Step 5:
ul#menu li{
background: #47a3da;
float: left;
}
The above markup says to go to the unordered list with ID “menu” and style its list items such that the background color becomes blue and floats all list items to the left.
This will arrange all top-level elements in the same line. It also removes the bullets from the list.
Step 6:
ul#menu li a{
color: #000000;
display: block;
padding: 10px 25px;
text-decoration: none;
border-bottom: 2px solid #000000;
}
The above code says to go to the unordered list with ID “menu,” style all the links inside the list elements, change the color to black, alter the display style to block, and add top and bottom padding of 10px while right and left padding to 25px.
Next, text-decoration has been set to none, which will remove the link’s underline.
Finally, the bottom border has been styled.
Step 7:
ul#menu li a:hover{
background: #72caff;
}
This markup will change the color of the links when the cursor is hovered over the top level list items.
Step 8:
ul#menu li ul li{
float: none;
}
The above-mentioned code snippet says that do not float the list items of the internal unordered list.
ul#menu li ul{
position: absolute;
display: none;
}
The aforementioned markup will hide the unordered internal list and set its position to absolute.
ul{
ul#menu li:hover ul{
display: block;
}
Finally, the above markup will make the internal unordered list items appear when the cursor is hovered over one of the top-level list items.
Now, if you add the link of this CSS file to the HTML file that you created in the first three steps and then refresh the page, you should be able to see your drop-down menu.
