▷ Creación de MENÚS y DESPLEGABLES con HTML y CSS

  

📋 Cómo crear un menú desplegable con HTML y CSS

Los menús desplegables permiten mostrar opciones adicionales al pasar el mouse o hacer clic en un elemento principal. Son muy útiles para sitios con varias secciones o subcategorías. En este artículo aprenderás cómo crear un menú desplegable sencillo utilizando solo HTML y CSS.

---

📌 ¿Qué es un menú desplegable?

Es un componente de navegación donde los submenús aparecen cuando el usuario interactúa con un elemento principal, generalmente al pasar el cursor (hover) o al hacer clic. El menú puede estar horizontal o vertical y puede contener múltiples niveles de profundidad.

---

📄 Estructura básica en HTML

<nav class="menu">
  <ul>
    <li><a href="#">Inicio</a></li>
    <li>
      <a href="#">Servicios</a>
      <ul class="submenu">
        <li><a href="#">Diseño Web</a></li>
        <li><a href="#">SEO</a></li>
        <li><a href="#">Mantenimiento</a></li>
      </ul>
    </li>
    <li><a href="#">Contacto</a></li>
  </ul>
</nav>

---

🎨 Estilos con CSS

<style>
.menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: #333;
  display: flex;
}

.menu ul li {
  position: relative;
}

.menu ul li a {
  display: block;
  padding: 15px 20px;
  color: white;
  text-decoration: none;
  background-color: #333;
}

.menu ul li a:hover {
  background-color: #555;
}

/* Submenú oculto */
.submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #444;
  flex-direction: column;
  min-width: 160px;
  z-index: 1;
}

/* Mostrar submenú al hacer hover */
.menu ul li:hover .submenu {
  display: block;
}

.submenu li a {
  padding: 10px 15px;
  background-color: #444;
  color: white;
}

.submenu li a:hover {
  background-color: #666;
}
</style>

---

🧪 ¿Cómo funciona?

• 📌 El submenú está oculto por defecto con display: none.
• 🖱️ Al pasar el cursor sobre el <li> principal, se activa el selector :hover y se muestra el submenú con display: block.
• 🧩 Se usa position: absolute para que el submenú aparezca flotando justo debajo del elemento principal.

---

📱 ¿Es compatible con móviles?

Este tipo de menú funciona muy bien con mouse, pero para móviles donde no hay "hover", se recomienda usar una versión controlada con JavaScript o convertir el menú en tipo acordeón.

Si te interesa, en un próximo artículo podemos hacer una versión de menú desplegable responsive con JavaScript y botón de hamburguesa.

---

📌 Buenas prácticas

• ✅ Asegúrate de que los submenús sean accesibles con el teclado si usas JavaScript.
• ✅ Mantén contrastes adecuados entre fondo y texto.
• ✅ No ocultes elementos importantes en submenús muy profundos.
• ✅ Usa <nav> para indicar semánticamente que es un menú de navegación.

En el siguiente ejemplo te muestro como construir un menú desplegable en tu proyecto web.

🗨️ ¿Qué opinas?
Me encantaría saber tu opinión sobre este tema. Déjame un comentario aquí abajo 💬 y, si te gustó el contenido, ¡no olvides seguir el blog para no perderte las próximas publicaciones! 📚✨