Como estás vinculado a varios clientes, por favor selecciona con cuál deseas proceder.
¿Quieres aprender a crear un menú desplegable CSS desde cero y no sabes por dónde empezar? No te preocupes, aquí lo vas a entender todo de forma clara y con ejemplos que funcionan.
Un menú desplegable es como una caja con compartimentos ocultos. A simple vista parece simple, pero al pasar el ratón o hacer click, aparecen nuevas opciones. ¿Te suena? Es ese tipo de menú que ves en casi todas las webs, desde tiendas online hasta blogs como este.
¿Por qué se usa tanto? Porque permite mostrar muchas secciones sin llenar la pantalla. Así, la web se ve limpia, ordenada y fácil de usar. Además, es ideal para mejorar la experiencia del usuario, sobre todo si tienes muchas páginas o categorías.
No necesitas conocimientos avanzados. Solo ganas de aprender y seguir paso a paso los ejemplos que te vamos a mostrar. Vamos a ello.
Menú desplegable CSS desde cero con ejemplos claros
✅Optimizar el espacio: Muestra mucha información sin abrumar.
✅Mejorar la navegación: Ayuda a tus visitantes a encontrar lo que buscan.
✅Dar una imagen profesional: Un sitio organizado da confianza.
Qué es un menú desplegable y para qué sirve
Un menú desplegable es una lista de opciones que está escondida hasta que el usuario hace algo, como pasar el ratón por encima o hacer click. ¿Has estado alguna vez en una web donde aparece un submenú cuando pasas el ratón por una categoría principal? Eso es justo lo que vamos a crear.
Este tipo de menús se usa cuando hay muchas secciones en una web y no caben todas en la parte superior. En lugar de mostrar todos los enlaces al mismo tiempo, se agrupan bajo una palabra clave como “Servicios” o “Productos”. Cuando el usuario quiere ver más, el menú se despliega y muestra las opciones ocultas.
¿Por qué usarlo?
Un menú desplegable bien hecho ayuda a los visitantes que usan tu web. Aquí tienes algunas razones claras:
Ahorra espacio: Evita que la cabecera de la web esté saturada de enlaces.
Organiza mejor la información: Agrupa secciones parecidas dentro de un mismo bloque.
Facilita la navegación: El usuario encuentra lo que busca más rápido.
Mejora el diseño: Da una sensación más profesional y limpia.
¿Dónde se utiliza?
Puedes ver menús desplegables en:
Tiendas online, para separar productos por categorías.
Blogs, para agrupar artículos por temas.
Páginas corporativas, con secciones como “Quiénes somos”, “Equipo” o “Contacto”.
Si tienes mucho contenido, un menú desplegable en CSS es una solución sencilla, efectiva y fácil de implementar.
🦴
HTML: El Esqueleto
Define la estructura y el contenido de tu menú. Usamos listas < ul > y elementos < li > para crear la base, como los huesos de un cuerpo.
✨
CSS: La Magia y el Estilo
Añade estilo y funcionalidad. Define colores, tamaños y, lo más importante, la lógica para ocultar y mostrar el submenú al pasar el ratón por encima.
Estructura básica en HTML paso a paso
Para crear un menú desplegable, lo primero que necesitamos es una estructura clara en HTML. Piensa en esto como los cimientos de una casa: si están bien hechos, todo lo demás funcionará mejor.
Aquí te dejamos un ejemplo simple de cómo sería la base de un menú:
<nav>: Es el contenedor principal del menú. Indica que todo lo que está dentro forma parte de la navegación de la web.
<ul class="menu-principal">: Crea una lista sin orden (ul = unordered list) para agrupar las opciones del menú principal.
<li>: Cada elemento de la lista representa una opción del menú.
<a href="#">: Son los enlaces. Puedes cambiar el # por una URL real más adelante.
<ul class="submenu">: Es otra lista, pero está dentro de uno de los elementos del menú. Esto es lo que se mostrará cuando el usuario pase el ratón por encima de “Servicios”.
Esta estructura no hace que el menú se despliegue aún. Para eso, necesitaremos aplicar estilos con CSS, que veremos en el siguiente apartado. Pero como base, ya lo tenemos todo listo para empezar a darle forma y comportamiento.
Cómo darle estilo al menú con CSS
Ya tenemos la estructura del menú con HTML, pero todavía no se ve como un menú profesional. Ahora toca usar CSS para darle estilo, organizar los elementos y preparar el comportamiento desplegable.
Paso 1: Limpiar la apariencia por defecto
Los navegadores aplican estilos por defecto a listas y enlaces. Para tener un diseño limpio, primero los eliminamos:
ul {
list-style: none; /* Quita los puntos de las listas */
margin: 0;
padding: 0;
}
a {
text-decoration: none; /* Quita el subrayado de los enlaces */
color: #fff; /* Cambia el color del texto a blanco */
}
Paso 2: Estilizar el menú principal
Queremos que las opciones principales estén en línea y se vean como botones. Usamos display: flex para alinearlos horizontalmente y un fondo oscuro para dar contraste:
.menu-principal {
display: flex;
background-color: #333;
}
.menu-principal li {
position: relative; /* Importante para posicionar el submenú más adelante */
}
.menu-principal a {
display: block;
padding: 15px 20px;
background-color: #333;
transition: background-color 0.3s;
}
.menu-principal a:hover {
background-color: #555;
}
¿Qué hace este CSS?
.menu-principal usa flex para alinear los <li> en horizontal, uno al lado del otro.
Cada enlace se muestra como un bloque para que el área clicable sea más grande.
Se aplica un color de fondo oscuro y un efecto hover para que al pasar el ratón, el color cambie y se note que se puede interactuar.
La propiedad position: relative en los <li> es esencial para que luego podamos colocar los submenús justo debajo.
Con este código, el menú principal ya se verá limpio, ordenado y funcional. Pero aún no se despliega nada. Eso lo resolveremos en el siguiente paso.
🎨 Generador de Menús CSS
Personaliza tu menú y ve el resultado en tiempo real
Ahora vamos a aplicar la parte más importante: hacer que el submenú aparezca al pasar el ratón por encima de una de las opciones del menú principal. Para eso, solo necesitamos unas pocas líneas de CSS.
¿Qué es hover?
En CSS, hover se refiere al momento en que el usuario pasa el puntero del ratón sobre un elemento. Es como cuando señalas algo con el dedo sin tocarlo del todo. Este estado se puede usar para cambiar el estilo o mostrar cosas ocultas, como un submenú.
Paso 1: Ocultar el submenú por defecto
Queremos que el submenú solo se vea cuando el usuario interactúe con el menú. Así que lo escondemos al principio:
.submenu li a {
padding: 10px 15px;
background-color: #444;
display: block;
}
.submenu li a:hover {
background-color: #666;
}
¿Qué hace todo esto?
.submenu { display: none }: Esconde la lista secundaria al cargar la página.
position: absolute: Coloca el submenú justo debajo del botón principal.
li:hover .submenu: Muestra el submenú cuando el ratón pasa por encima del botón padre.
Estilos visuales: Mejoran el diseño y la usabilidad.
Este comportamiento es muy común en menús de escritorio. Sin embargo, en móviles no hay ratón ni hover, así que en el siguiente apartado veremos cómo adaptarlo para pantallas táctiles.
Cómo adaptar el menú desplegable a móviles
Hasta ahora, el menú desplegable que hemos creado funciona bien en ordenadores. Pero ¿qué pasa en móviles? En una pantalla táctil no hay ratón, así que no se puede usar hover para mostrar el submenú.
¿Qué se puede hacer entonces?
Hay varias formas de solucionarlo, pero vamos a ver una sencilla que solo usa HTML y CSS, perfecta si estás empezando.
Opción 1: Mostrar siempre el submenú en móviles
La forma más fácil es mostrar el submenú siempre visible en pantallas pequeñas. Así, no hace falta pasar el dedo por encima ni hacer click en ningún botón adicional.
Podemos hacerlo con una media query en CSS. Es una regla que se activa solo en móviles:
@media screen and (max-width: 768px) {
.submenu {
display: block; /* El submenú siempre visible */
position: static; /* Se coloca de forma natural, ya no como flotante */
background-color: #333;
}
.menu-principal {
flex-direction: column; /* Cambia el menú a formato vertical */
}
.menu-principal li {
width: 100%;
}
}
¿Qué hace este código?
Usa @media screen and (max-width: 768px) para aplicar estilos solo cuando la pantalla es pequeña (como en móviles).
Cambia el menú a formato vertical con flex-direction: column.
Elimina el comportamiento flotante del submenú (position: static) y lo deja siempre visible, así el usuario puede tocar directamente lo que necesita.
¿Es una solución perfecta?
No del todo. Lo ideal sería tener un botón que abra y cierre el menú (como el típico icono de hamburguesa). Pero eso requiere usar JavaScript. Si prefieres mantenerlo todo con HTML y CSS, esta solución es clara, sencilla y funcional.
Propiedad CSS
Qué hace
position: relative;
Se aplica al elemento principal (el `
`). Lo convierte en el "punto de anclaje" para el submenú.
position: absolute;
Se aplica al submenú (`
`). Lo "despega" de la página para que flote sobre el contenido, posicionado respecto a su anclaje.
display: none;
El truco inicial. Oculta el submenú por defecto. ¡Nadie lo ve!
li:hover > ul { display: block; }
¡LA MAGIA! Cuando pasas el ratón (`:hover`) sobre el `
` principal, su hijo directo (`>`) el `
` se hace visible (`display: block`).
Qué puede salir mal errores comunes y cómo evitarlos
Crear un menú desplegable CSS parece fácil (y lo es), pero hay algunos errores típicos que pueden darte más de un quebradero de cabeza si no sabes por qué ocurren. Aquí repasamos los fallos más comunes y cómo solucionarlos sin volverte loco.
1. El submenú no aparece al pasar el ratón
Este es el clásico. Tienes el HTML perfecto, el CSS bien escrito… pero el submenú sigue sin mostrarse.
¿Por qué pasa?
Casi siempre es porque te has olvidado de poner position: relative en el elemento padre o position: absolute en el submenú. Sin eso, el navegador no sabe dónde colocarlo.
Cómo evitarlo
Asegúrate de que el <li> que contiene el submenú tenga position: relative y que el submenú esté en position: absolute.
2. El submenú se queda encima de otros elementos
A veces, el submenú aparece, pero tapa cosas que no debería o flota por donde no toca.
¿Por qué pasa?
Esto suele ser un problema de jerarquía visual. Si no usas bien el z-index, el menú puede aparecer por detrás de otros elementos.
Cómo evitarlo
Añade z-index: 10 o un valor alto al submenú para que tenga prioridad en pantalla.
3. El menú no funciona en móviles
Como ya vimos antes, el hoverno funciona en pantallas táctiles. Así que si solo usas :hover, en móviles no se desplegará nada.
Cómo evitarlo
Usa media queries para mostrar los submenús siempre visibles en móviles. Es una solución sencilla que evita muchos problemas.
4. El diseño se rompe en pantallas pequeñas
Tu menú puede verse bien en ordenador, pero si no lo haces responsive, en móviles se verá desordenado o incluso cortado.
Cómo evitarlo
Aplica flex-direction: column en móviles, ajusta los anchos y usa min-width para que los submenús no se achiquen demasiado.
Estos errores son muy comunes cuando estás empezando, pero por suerte, todos tienen solución con un poco de práctica. Recuerda que el navegador solo hace lo que tú le pides: si el menú no se ve bien, probablemente haya una línea de código que falta o que se puede mejorar.
Ejemplo completo de menú desplegable con HTML y CSS
Ya hemos visto paso a paso cómo crear un menú desplegable, pero ahora toca verlo todo junto para que tenga más sentido.
Aquí tienes un ejemplo completo y funcional. Puedes copiar este código en un archivo .html y abrirlo en tu navegador para ver cómo funciona.
Adaptación automática a móviles sin complicaciones.
Este es un buen punto de partida. A partir de aquí, puedes modificar colores, tipografías, añadir más niveles o incluir íconos. Lo importante es que entiendas cómo está montado y cómo cada parte se relaciona con la otra.
Conclusión
Como has visto, crear un menú desplegable con HTML y CSS no es tan complicado como parece. Con una buena estructura y unos cuantos estilos bien aplicados, puedes mejorar mucho la navegación de cualquier página web.
Este tipo de menús te ayuda a organizar mejor los contenidos, ahorrar espacio en la cabecera y ofrecer una experiencia más clara al usuario. Y lo mejor: todo esto se puede lograr sin usar una sola línea de JavaScript.
¿Y ahora qué?
Si quieres seguir mejorando tu menú, puedes explorar nuevas ideas como:
Añadir transiciones suaves al desplegar los submenús
Incluir iconos junto a cada opción
Crear un menú con botón desplegable (tipo hamburguesa) para móviles
O incluso hacerlo accesible para lectores de pantalla
Pero eso ya lo dejamos para otro post.
Por ahora, lo más importante es que entiendas cómo funciona cada parte: la estructura en HTML, el estilo con CSS y el comportamiento al interactuar con el usuario.
Recuerda: cuanto más claro sea tu menú, más fácil será navegar por tu web.
Preguntas Frecuentes (FAQ)
¿Cómo se hace un menú desplegable solo con HTML y CSS?
La clave es combinar una estructura de listas anidadas en HTML con estilos CSS. Se usa la propiedad display: none; para ocultar el submenú por defecto y la pseudo-clase :hover para mostrarlo cuando el usuario pasa el ratón por encima del elemento principal.
¿Qué diferencia hay entre un menú normal y uno desplegable?
Un menú normal muestra todas sus opciones visibles al mismo tiempo. En cambio, un menú desplegable oculta sub-opciones para mantener la interfaz limpia, y solo las revela cuando el usuario interactúa con el elemento padre. Esto ahorra espacio y mejora la organización.
¿Qué significa exactamente “menú en cascada”?
Es simplemente otro nombre para un menú desplegable. El término "cascada" hace referencia a cómo los submenús "caen" o se despliegan desde el menú principal, creando una jerarquía visual que se asemeja a una cascada de opciones.
¿Puedo aplicar estilos complejos solo con CSS?
¡Absolutamente! Con CSS puedes personalizar colores, fuentes, tamaños, bordes, sombras y añadir transiciones suaves para que el menú aparezca y desaparezca con elegancia. Para la mayoría de los menús desplegables, no necesitas JavaScript en absoluto.