How to Develop a Drop-down Menu with CSS3 and HTML5

By 11/01/2017Web Design

The drop-down menu is a core feature of most modern websites. It is a collection of menu items in which clicking on an item expands a menu at the bottom of the main menu. Since the menu expands towards the bottom, it is referred to as “drop-down menu.” In this tutorial, we will explain how you can develop your own drop-down menus using CSS3 and HTML5. This will not involve any JavaScript or jQuery, but, will be coded with pure HTML5 and CSS3. So, let’s begin.

Drop-down menu

HTML Markup

Step 1:

Create a HTML document and add the following line of code in 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 “menu.” 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>
</html>

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 above code is viewed in a browser, it will look like this:

drop-down menu html code

CSS Style

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;
}

This above markup will remove padding and margin from all unordered list from the HTML code.

Step 5:

ul#menu li{
background: #47a3da;
float: left;
}

The above markup says that go to the unordered list with ID “menu” and style its list items such that the background color becomes blue and floats all lists items to 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 that, 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 internal unordered list and will set its position to absolute.

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 first three steps and then refresh the page, you will see the following drop-down menu.

Leave a Reply

Made In Los Angeles