Responsive navigation of drop-down menus with HTML and CSS ★ Digital marketing agency

Table of contents

Responsive navigation: drop-down menus with HTML and CSS

Nowadays, it is essential to consider responsive navigation when designing websites. One of the most common components of responsive navigation is drop-down menus, which allow you to organise and display links efficiently, especially on smaller screens.

Importance of responsive navigation

With the growing use of mobile devices to access the internet, it is essential that websites are adapted to different screen sizes. Responsive navigation is key to providing a smooth and enjoyable user experience on all devices.

Drop-down menus are a great way to organise navigation on sites with many sections or pages. With them, users can access different sections with just a couple of clicks, rather than having to scroll through a long list of links.

How to create drop-down menus with HTML and CSS

To create drop-down menus with HTML and CSS, you can follow these steps:

First, it creates the HTML structure of your menu using unordered lists (
- ). For example:


<nav>
<ul>
<li><a href="#">Inicio</a></li>
<li>
      <a href="#">Productos</a>
<ul>
<li><a href="#">Producto 1</a></li>
<li><a href="#">Producto 2</a></li>
<li><a href="#">Producto 3</a></li>
</ul>
</li>
<li><a href="#">Contacto</a></li>
</ul>
</nav>

Add CSS styles to hide the subcategories and have them displayed when the user interacts with the menu. Here is an example of how the styles can be applied:


nav ul ul {
  display: none;
}
nav ul li:hover > ul {
  display: inherit;
}

Finally, you can add additional styles to customise the appearance of the drop-down menu to your liking.

Remember that you can also add CSS transitions to create soft effects when the menu is expanded or collapsed.

Full example of responsive navigation with drop-down menus

Here is a complete example of a responsive navigation with drop-down menus using HTML and CSS:


<nav>
<ul>
<li><a href="#">Inicio</a></li>
<li>
      <a href="#">Productos</a>
<ul>
<li><a href="#">Producto 1</a></li>
<li><a href="#">Producto 2</a></li>
<li><a href="#">Producto 3</a></li>
</ul>
</li>
<li><a href="#">Contacto</a></li>
</ul>
</nav>


nav ul {
  background-color: #f9f9f9;
  padding: 0;
  list-style: none;
}
nav ul li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 10px 20px;
  color: #333;
  text-decoration: none;
}
nav ul ul {
  display: none;
  position: absolute;
}
nav ul li:hover > ul {
  display: inherit;
}
nav ul ul li {
  width: 200px;
  float: none;
  display: list-item;
  position: relative;
}
nav ul ul ul li {
  position: relative;
  top: -60px;
  left: 200px;
}
nav ul li:hover {
  background-color: #f1f1f1;
}
nav ul li:hover a {
  color: #428bca;
}

Once you have implemented this structure and styling on your website, you can have responsive navigation with drop-down menus that will adapt to any screen.