How to create a dropdown menu with HTML and CSS

Dropdown menus are a fundamental component of web development, offering a convenient way to present a list of options to users.
In this tutorial, I'll guide you through the process of creating a simple dropdown menu using HTML and CSS.

To get the most out of this tutorial, you should have some basic knowledge of HTML and CSS. If you're new to these technologies, you might want to check out some introductory tutorials.

Having said that, let's dive right in.

Add HTML Markup

We'll start by creating the HTML structure for our dropdown menu. We'll use an unordered list <ul> to represent the menu items and nested lists to create submenus. Here is how our HTML markup will look like:

<nav>
     <ul>
         <li><a href="#">Home</a></li>
            <li>
                <a href="#">Resources</a>
                <ul>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">Academy</a></li>
                    <li><a href="#">Reviews</a></li>
                </ul>
            </li>
            <li>
                <a href="#">Newsletters</a>
                <ul>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">Socials</a></li>
                    <li><a href="#">Reviews</a></li>
                </ul>
            </li>
           <li><a href="#">About Us</a></li>
           <li><a href="#">Contact</a></li>
      </ul>
</nav>

Here is our result:

Now, let's add some CSS to style our dropdown menu in the next section.

Add CSS Styling

Step 1. We'll start by removing the default list styles and resetting the default padding and margin to eliminate any spacing around the list.

Here's the CSS:

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

After that, let's style the main menu <li> items within the <nav> element. We'll set them to display as inline-block elements, which places them horizontally next to each other.

Here's the CSS:

nav ul li {
    display: inline-block;
    position: relative;
}

Next, we'll style the <a> elements by:

• Setting them to display as block elements. so they occupy the entire width of their parent list items.
• Adding some padding for spacing around the text.
• We'll add some transition to create a smooth color change effect when you hover over the menu items.
• Changing the background-color on hover to make it a little bit visually appealing.

Here's the CSS:

nav ul li a {
    display: block;
    padding: 10px 20px;
    text-decoration: none;
    color: #333;
    transition: background-color 0.3s;
}

nav ul li a:hover {
    background-color: #f0f0f0;
}

Step 2. Now, let's add some styles for the dropdown <ul>submenus within the main menu <li> items by:

• Hiding them by default using display: none and give them a position: absolute so they are placed relative to their parent list items.
• we'll also set a hover effect on the main menu <li>, which displays the associated submenu by changing the display property to block.

Here's the CSS:

nav ul li ul {
    display: none;
    position: absolute;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border: 1px solid #ccc;
}

nav ul li:hover ul {
    display: block;
}

Finally, To finish up styling the dropdown menu, we'll add the following:

• Styles the individual items within the dropdown submenu. It ensures they are displayed as block-level elements and prevents wrapping of text using white-space: nowrap.
• Similar to the main menu items, we'll make them display as block-level elements, add padding for spacing and include a transition effect for background-color changes on hover.

Here's the CSS:

nav ul li ul li {
    display: block;
    white-space: nowrap;
}

nav ul li ul li a {
    display: block;
    padding: 10px 20px;
    text-decoration: none;
    color: #333;
    transition: background-color 0.3s;
}

nav ul li ul li a:hover {
    background-color: #f0f0f0;
}

Final result:

Conclusion

Creating a dropdown menu with HTML and CSS is a fundamental skill for web developers. With the steps outlined in this tutorial, you've built a simple yet functional dropdown menu. You can now expand on this foundation to create more complex menus and integrate them into your web projects.