DEV Community

Cover image for How to create a dropdown menu with HTML and CSS
Umar Yusuf
Umar Yusuf

Posted on

38 2 1 1 1

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>


Enter fullscreen mode Exit fullscreen mode

Here is our result:

HTML output

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


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

Final result:
final dropdown menu view

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.

Image of Wix Studio

2025: Your year to build apps that sell

Dive into hands-on resources and actionable strategies designed to help you build and sell apps on the Wix App Market.

Get started

Top comments (4)

Collapse
 
shusain_d54c3f4df3007d80 profile image
s.husain

o

Collapse
 
shusain_d54c3f4df3007d80 profile image
s.husain

p

Collapse
 
shusain_d54c3f4df3007d80 profile image
s.husain

k

Collapse
 
shusain_d54c3f4df3007d80 profile image
s.husain

y

Image of AssemblyAI

Automatic Speech Recognition with AssemblyAI

Experience near-human accuracy, low-latency performance, and advanced Speech AI capabilities with AssemblyAI's Speech-to-Text API. Sign up today and get $50 in API credit. No credit card required.

Try the API

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay