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.