Menús desplegables CSS
Las barras de navegación alineaban enlaces en una fila. Un desplegable añade un panel anidado que se abre bajo un disparador — normalmente al pasar el ratón, y mejor también cuando el foco del teclado entra dentro. Domina un patrón CSS calmado antes de inventar mega-menús gigantes.
Una caja de herramientas de desplegables
📊 Desplegables de un vistazo
| Pieza | Trabajo diario |
|---|---|
| Disparador relative | El li padre (o contenedor) se convierte en ancla de posicionamiento |
| Panel absolute | El menú anidado se sitúa bajo el disparador (top: 100%) |
| Oculto por defecto | display: none o fuera de pantalla hasta abrirse |
Revelar :hover |
El puntero abre el panel |
:focus-within |
Usuarios de teclado pueden abrir/mantener el panel al tabular |
z-index |
Mantiene el panel abierto por encima del contenido siguiente |
Los desplegables solo con CSS son un clásico didáctico. Los productos reales suelen añadir JS para alternar con clic en táctil, Escape para cerrar y una accesibilidad más rica — aprende primero el esqueleto CSS aquí.
Disparador relative, lista anidada
Mantén el enlace disparador en la barra superior y anida una segunda lista para el submenú. El ítem padre debe estar posicionado para que los hijos absolute sepan su hogar.
.nav > li {
position: relative;
}
.nav > li > a {
display: inline-block;
padding: 0.5rem 0.75rem;
}
Panel absolute bajo el disparador
Coloca el submenú con position: absolute, fíjalo al borde inferior del disparador y dale un fondo sólido para que el texto de la página no se filtre.
.nav .submenu {
position: absolute;
top: 100%;
left: 0;
min-width: 12rem;
margin: 0;
padding: 0.35rem 0;
list-style: none;
background: #fff;
border: 1px solid #e5e5e5;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}
Ocultar hasta abrir
Deja el panel cerrado por defecto. Abrirlo todo de golpe anula el sentido del desplegable.
.nav .submenu {
display: none;
}
Revelar al pasar el ratón
Cuando el puntero descansa sobre el ítem padre, muestra el panel. El padding del disparador ayuda a evitar cierres accidentales en el borde.
.nav > li:hover > .submenu {
display: block;
}
Prefiere también focus-within
Solo hover falla a usuarios de teclado. :focus-within mantiene el panel abierto mientras el foco está dentro del ítem — una mejora CSS calmada.
.nav > li:hover > .submenu,
.nav > li:focus-within > .submenu {
display: block;
}
Un hábito calmado de desplegable
Padre relative, panel absolute, oculto por defecto, hover + focus-within, z-index modesto. Deja los mega-menús con clic y el ARIA complejo para patrones más ricos después — no lo confundas con la lección de barras de navegación planas.
.nav .submenu {
z-index: 20;
}
.nav .submenu a {
display: block;
padding: 0.45rem 0.9rem;
text-decoration: none;
color: inherit;
}
Pruébalo tú
- Haz cada
lide nivel superiorposition: relative. - Anida una lista
.submenuy posiciónalaabsolute; top: 100%; left: 0. - Oculta con
display: noney muestra enli:hover. - Añade
:focus-withinpara que el foco del teclado también abra el panel. - Sube el
z-indexy anota cuándo añadirías JS para alternar con clic táctil.
Errores comunes
- Submenú absolute sin padre relative (el panel salta lejos)
- Dejar el submenú visible por defecto
- Quitar estilos de foco y perder a usuarios de teclado
- Construir un mega-menú JS completo antes de aprender este esqueleto CSS
- Tratar los desplegables como la lección de diseño de página entera
Resumen
- Los desplegables anidan un panel bajo un disparador relative
- Absolute +
top: 100%fija el menú bajo el enlace - Oculta por defecto; revela con hover y focus-within
- Usa z-index para que el panel cubra el contenido
- Las barras planas vinieron primero; los menús anidados son esta lección
🧠 Pon a Prueba tu Conocimiento
Pon a Prueba tu Conocimiento
Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema
📝 Instrucciones
- Lee cada pregunta cuidadosamente
- Selecciona la mejor respuesta para cada pregunta
- Puedes repetir el quiz tantas veces como quieras
- Tu progreso se mostrará en la parte superior