▷ 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ú condisplay: 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.
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! 📚✨
Comentarios