CSS: Como crear un menú dropdown sin JavaScript

Como crear un menú drop down con puro CSS - CableNaranja
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)

¡Comparte nuestro contenido!

Una de las cosas más básicas y necesarias dentro de un sitio web, es un menú de opciones. Por eso, en está ocasión, vamos a aprender a crear un sencillo, pero elegante menú dropdown que utilice única y exclusivamente HTML y CSS ¡Manos a la obra!

Antes del dropdown, hagamos primero el menú básico

Vamos a realizar un menú básico y simple con una etiqueta <nav>, una etiqueta <ul> y unos cuantos <li> con enlaces en su interior:

<nav>
   <ul>
      <li><a href="#">Inicio</a></li>
      <li><a href="#">Productos</a></li>
      <li><a href="#">Servicios</a></li>
      <li><a href="#">Nosotros</a></li>
      <li><a href="#">Contacto</a></li>
   </ul>
</nav>

Trabajemos un poco sus estilos. Para ello, vamos a crear un archivo llamado menu.css y lo enlazamos a nuestro documento.

<link href="menu.css" rel="stylesheet" type="text/css" />

Dentro de ese archivo, colocamos un pequeño reset básico para probar (está parte es opcional si ya tienes un reset CSS establecido)

html, body, ul, li, a, div, nav{
   margin: 0;
   padding: 0;
}

Veamos como iniciamos nuestro menú.

Como crear un menú drop down con puro CSS - CableNaranja

Ahora, tomemos el <nav>, le daremos un ancho del 100%, un alto de 50 píxeles y lo pintaremos de color rojo.

nav{
    width: 100%;
    height: 50px;
    background: red;
}

Luego, al <ul> que está dentro del <nav> le quitamos las viñetas.

nav ul{ list-style: none; }

Después, a cada <li> de ese <ul> lo convertimos en un inline-block con 20% de ancho (porque son 5 / 100 = 20), le ponemos la misma altura que <nav> y los hacemos flotar hacia la izquierda. También su posición será relativa.

nav ul li{
   position: relative;
   display: inline-block;
   width: 20%;
   height: 50px;
   float: left;
}

Veamos como se ve ahora.

Como crear un menú drop down con puro CSS - CableNaranja

Trabajaremos con los enlaces. Los convertimos en un bloque con 100% de ancho y hacemos que hereden la altura de su predecesor. Aumentamos un poco la fuente y eliminamos la línea inferior típica de los enlaces. Lo centramos horizontalmente y para conseguir el centrado vertical, le ponemos un line-height con la altura inicial.

nav ul a{
    display: block;
    width: 100%;
    height: inherit;
    font-size: 1.2em;
    text-align: center;
    text-decoration: none;
    line-height: 50px;
    color: #FFF;
}

Para el hover (pasar el ratón por el enlace) sólo hacemos un cambio de color de fondo.

nav ul a:hover{
    background: #333;
}

Y ahora tenemos la primera parte terminada.

Como crear un menú drop down con puro CSS - CableNaranja

Hagamos submenús para nuestro menú dropdown

Vamos a tomar el segundo elemento del menú y le colocaremos un <div> que servirá de submenú. Para poder reutilizarlo, le asignaremos como nombre de clase la palabra submenu. Dentro del mismo, colocaremos un <ul> con 3 opciones (pueden ser las que se necesiten)

<div class="submenu">
   <ul>
      <li><a href="#">Producto 1</a></li>
      <li><a href="#">Producto 2</a></li>
      <li><a href="#">Producto 3</a></li>
   </ul>
</div>

Como se mencionó arriba, lo pondremos dentro del segundo elemento del menú principal.

Como crear un menú drop down con puro CSS - CableNaranja

En cuanto al estilo, necesitamos que su posición sea absoluta. También lo convertimos en un bloque con un ancho del 100%, le ponemos un color de fondo rojo, y dejamos que herede el valor de float de su antecesor.

.submenu{
    position: absolute;
    display: block;
    width: 100%;
    background: red;
    float:inherit;
}

Luego para que no se apilen, a cada <li> dentro de submenu lo convertimos en un bloque al 100% de ancho.

.submenu ul li{
    display: block;
    width: 100%;
}

Comienza a tomar forma.

Como crear un menú drop down con puro CSS - CableNaranja

Para que nuestro submenú comience a funcionar, necesitamos hacer dos cosas simples: primero tenemos que cambiar el display de submenu a none.

.submenu{
    position: absolute;
    display: none; /* Cambiar sólo este valor */
    width: 100%;
    background: red;
    float:inherit;
}

Después, le diremos que al hacer hover sobre los <li> del menú principal, entonces submenú recupera su valor de display.

nav ul li:hover .submenu{
    display: block;
}

¡Es hora de probarlo, veámoslo, veámoslo brillar!

Creando un submenú para el submenú

En caso de que necesitemos un tercer nivel, haremos algo similar. En nuestro ejemplo insertaremos un <div> con nombre de clase subsubmenu dentro de el tercer elemento de nuestro submenú.

Como crear un menú drop down con puro CSS - CableNaranja

De regreso en nuestro CSS, copiamos submenu y esa copia la renombramos como subsubmenu. Además le añadiremos un left al 100% y un top con valor de 0.

.subsubmenu{
    position: absolute;
    display: none;
    left: 100%;
    top: 0;
    width: 100%;
    background: red;
    float:inherit;
}

Por último, queremos que al hacer hover sobre los elementos <li> de submenu, el subsubmenu recupere su propiedad display.

.submenu ul li:hover .subsubmenu{
    display: block;
}

¡Y este es nuestro resultado final!

¡Pon a prueba el código!

¡Y eso es todo por hoy, amigos! Puedes probar el código, editarlo o ajustarlo a tus necesidades.

¿Te ha resultado? Déjanos saber en los comentarios aquí abajo, en nuestra cuenta de twitter @cablenaranja7 o en nuestra página de facebook.

¡Comparte nuestro contenido!

Israel García

Docente, IT Manager, Blogger & Developer. Escribo por diversión, educo por pasión. | Grandstanding is not my thing.

También te podría gustar...

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

shares