How to create a responsive dropdown menu in html and css

by

Learn how to create a responsive dropdown menu in HTML and CSS with this step-by-step guide. Our tutorial includes HTML markup and CSS styling for a horizontal navigation bar that collapses into a vertical list on smaller screens. Make your website mobile-friendly and improve user experience with a responsive dropdown menu.

To create a responsive dropdown menu in HTML and CSS, you can follow the steps below:

HTML Markup: Start by creating the HTML markup for the dropdown menu. In this example, we will use a navigation bar with a dropdown menu.
html

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li class="dropdown">
      <a href="#">Dropdown</a>
      <ul class="dropdown-menu">
        <li><a href="#">Option 1</a></li>
        <li><a href="#">Option 2</a></li>
        <li><a href="#">Option 3</a></li>
      </ul>
    </li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

CSS Styling: Next, style the dropdown menu using CSS. Set the position property of the dropdown menu to absolute and display property to none.

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

nav li {
  margin-right: 20px;
}

nav a {
  display: block;
  text-decoration: none;
  color: #333;
  padding: 10px;
}

.dropdown {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
}

.dropdown:hover .dropdown-menu {
  display: block;
}

Responsive Design: Finally, make the dropdown menu responsive by adding media queries to adjust the layout for smaller screens.

@media only screen and (max-width: 600px) {
  nav ul {
    flex-direction: column;
  }

  nav li {
    margin: 0;
  }

  .dropdown-menu {
    position: static;
    display: none;
  }

  .dropdown:hover .dropdown-menu {
    display: block;
  }
}

That’s it! Now you have a responsive dropdown menu in HTML and CSS. The menu will display as a horizontal navigation bar on larger screens, and will collapse into a vertical list on smaller screens. The dropdown menu will display when the user hovers over the “Dropdown” link.

Leave a Comment