Cómo crear un menú desplegable en HTML y CSS

En este artículo, te mostraré cómo crear un menú desplegable utilizando HTML y CSS. Este tipo de menú es una excelente manera de organizar y presentar una gran cantidad de opciones de navegación de una manera ordenada y fácil de usar.

Estructurar el HTML del menú

Comencemos por estructurar el HTML del menú. Utilizaremos una lista no ordenada <ul> para el menú principal y cada elemento del menú se marcará con la etiqueta <li>. Dentro de cada elemento del menú, agregaremos un enlace <a> para que los usuarios puedan hacer clic y navegar a la página correspondiente.

<nav>
  <ul>
    <li><a href="#">Inicio</a></li>
    <li><a href="#">Nosotros</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>

Estilizar el menú con CSS

Ahora que tenemos la estructura HTML básica del menú, podemos comenzar a darle estilo con CSS. Primero, estableceremos algunos estilos básicos para el menú principal, como el color de fondo y el color del texto.

nav {
  background-color: #333;
  color: #fff;
}

Luego, agregaremos estilos para los elementos del menú y los enlaces, como la alineación del texto y el espaciado.

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

nav li {
  display: inline-block;
  margin-right: 20px;
  position: relative;
}

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

Agregar el efecto de desplegar en el menú

El siguiente paso es agregar el efecto de desplegar en el menú. Para hacer esto, utilizaremos CSS para ocultar los submenús y luego mostrarlos cuando el usuario pase el cursor sobre el elemento del menú principal correspondiente.

nav ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #333;
  padding: 0;
}

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

Estilizar los submenús

Finalmente, estilizaremos los submenús para que se vean diferentes al menú principal. Agregaremos un fondo oscuro y cambiaremos el color del texto a blanco.

nav ul ul li {
  display: block;
  width: 200px;
}

nav ul ul li a {
  color: #fff;
  padding: 10px;
}

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

¡Listo! Ahora tienes un menú desplegable completamente funcional y estilizado en HTML y CSS. Puedes personalizarlo aún más para que se adapte a las necesidades específicas de tu sitio web.