¿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

• Qué es un menú desplegable y para qué sirve
• Estructura básica en HTML paso a paso
  • ¿Qué hace este código?
• Cómo darle estilo al menú con CSS
• Hacer que el menú se despliegue con hover
• Cómo adaptar el menú desplegable a móviles
• Qué puede salir mal errores comunes y cómo evitarlos
• Ejemplo completo de menú desplegable con HTML y CSS
• Conclusión

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.

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>
  <ul class="menu-principal">
    <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="#">Posicionamiento SEO</a></li>
        <li><a href="#">Mantenimiento</a></li>
      </ul>
    </li>
    <li><a href="#">Contacto</a></li>
  </ul>
</nav>

¿Qué hace este código?

• <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.

/* Menú desplegable CSS */
.menu-principal {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  background-color: #333;
}

.menu-principal li {
  position: relative;
}

.menu-principal a {
  display: block;
  padding: 15px 20px;
  color: white;
  text-decoration: none;
  transition: background-color 0.3s;
}

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

.submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #444;
  min-width: 200px;
  z-index: 10;
}

.menu-principal li:hover .submenu {
  display: block;
}

Hacer que el menú se despliegue con hover

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 {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #444;
  min-width: 200px;
  z-index: 10;
}

Paso 2: Mostrar el submenú con hover

Usamos el selector li:hover .submenu para decirle al navegador: “Cuando el ratón esté sobre este elemento, muestra su submenú”.

.menu-principal li:hover .submenu {
  display: block;
}

Paso 3: Estilo del submenú

.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.

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 hover no 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.

HTML

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Menú desplegable CSS</title>
  <link rel="stylesheet" href="estilos.css">
</head>
<body>

  <nav>
    <ul class="menu-principal">
      <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="#">Hosting</a></li>
        </ul>
      </li>
      <li><a href="#">Contacto</a></li>
    </ul>
  </nav>

</body>
</html>

CSS

/* Reset de estilos básicos */
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  color: white;
}

/* Menú principal */
.menu-principal {
  display: flex;
  background-color: #333;
}

.menu-principal li {
  position: relative;
}

.menu-principal a {
  display: block;
  padding: 15px 20px;
  background-color: #333;
  transition: background-color 0.3s;
}

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

/* Submenú oculto por defecto */
.submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #444;
  min-width: 200px;
  z-index: 10;
}

.menu-principal li:hover .submenu {
  display: block;
}

.submenu li a {
  padding: 10px 15px;
  display: block;
}

.submenu li a:hover {
  background-color: #666;
}

/* Estilos responsive para móviles */
@media screen and (max-width: 768px) {
  .menu-principal {
    flex-direction: column;
  }

  .menu-principal li {
    width: 100%;
  }

  .submenu {
    display: block;
    position: static;
    background-color: #333;
  }
}

¿Qué incluye este ejemplo?

• Un menú principal con tres secciones.
• Un submenú que se despliega con hover.
• Estilo limpio y funcional en pantallas grandes.
• 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.