Es habitual encontrar menús desplegables (drop down menus) en muchos sitios webs, y estos nos permiten acceder a las subpáginas de cada sitio de forma más rápida y nos ahorran el tiempo de cargar la página padre para ir a la hija. Es frecuente que estos menús usen Javascript para funcionar, y con él logran unos efectos bastante atractivos, pero para lograr un menú más accesible a aquellos que no puedan usar Javascript, podemos sustituirlo por CSS.

El HTML

Antes de meternos en el CSS, tenemos que decidir cómo será el HTML de nuestro menú desplegable. Yo he optado por crear una lista desordenada (<ul>), ya que es el sistema que más se suele usar, y que podemos encontrar, por ejemplo, en WordPress.

El aspecto de nuestro menú será este:

[html]
<ul id="dropdownmenu">
<li><a href="#">Link 1</a></li>
<li>
<a href="#">Link 2</a>
<ul>
<li><a href="#">SubLink 2.1</a></li>
<li><a href="#">SubLink 2.2</a></li>
<li><a href="#">SubLink 2.3</a></li>
</ul>
</li>
<li>
<a href="#">Link 3</a>
<ul>
<li><a href="#">SubLink 3.1</a></li>
<li><a href="#">SubLink 3.2</a></li>
</ul>
</li>
<li><a href="#">Link 4</a></li>
<li>
<a href="#">Link 5</a>
<ul>
<li>
<a href="#">SubLink 5.1</a>
<ul>
<li><a href="#">SubLink5.1.1</a></li>
<li><a href="#">SubLink5.1.2</a></li>
</ul>
</li>
<li><a href="#">SubLink 5.2</a></li>
</ul>
</li>
</ul>
[/html]

El menú tiene 5 links principales, de los cuales el segundo link tiene tres sublinks, el tercero tiene dos sublinks y el quinto tiene dos sublinks de los cuales el primero tiene dos subsublinks.

El CSS

Voy a explicar un poco la lógica del menú. En principio el menú sólo tiene que mostrar los cinco links principales (links padres). Los demás deberían estar ocultos. Al pasar el cursor sobre un link padre, deberían mostrarse sus links hijos. Al pasar el cursor sobre uno de estos hijos, debería mostrarse sus hijos, y así sucesivamente.

Comenzaremos reseteando un par de estilos para que el menú quede mejor y haciendo que el menú principal sea en horizontal.

[css]
body, ul, li {
margin:0;
padding:0;
}

ul {
list-style:none;
display:inline-block;
}

ul li {
float:left;
}[/css]

Ahora daremos un poco de estilo al menú principal. Esta parte se puede modificar para que el menú quede al gusto de cada uno y se adapte mejor al diseño del lugar donde va a estar.

[css]
ul#dropdownmenu {
margin:none;
list-style:none;
height:40px;
width:100%;
background:#3b3b3b;
}

ul#dropdownmenu li {
height:40px;
}

ul#dropdownmenu li a {
display:block;
padding:8px;
height:24px;
color:#FFF;
font-family:Arial, Verdana, Geneva, sans-serif;
font-size:18px;
text-decoration:none;
}

ul#dropdownmenu li a:hover {
background:#CCC;
}
[/css]

Ahora tenemos que ocultar los sublinks y hacer que sólo se muestren cuando se pasa el cursor sobre el link padre. Esto lo haremos usando el selector :hover.

[css]
ul#dropdownmenu li ul {
display:none;
}

ul#dropdownmenu li:hover ul {
display:block;
background:#999;
position:absolute;
}
[/css]

Continuamos añadiendo algo de color a los sublinks:

[css]
ul#dropdownmenu li:hover ul li {
float:none;
position:relative; /* Gracias por el consejo, Álex */
background:#999;
}
[/css]

Finalmente, ocultamos los links nietos (hijos de los hijos), usando la misma técnica que antes. Lo único que cambia es que añadimos la propiedad top y left para que los links aparezcan a la derecha y no debajo (si aparecen debajo se superponen a los siguientes links hijos).

[css]
ul#dropdownmenu li ul li ul, ul#dropdownmenu li:hover ul li ul {
display:none;
}

ul#dropdownmenu li:hover ul li:hover ul {
display:block;
top:0;
left:100%;
}
[/css]

Con esto ya tenemos el menú completado. Este menú permite añadir tres niveles de links (padres, hijos y nietos), aunque se puede modificar para que funcione con todos los niveles que se necesiten.

Descarga y demo

Como es costumbre, he preparado una pequeña demo del menú desplegable para que podáis comprobar el resultado.

También está disponible la misma demo en un archivo comprimido para que la descarguéis si tenéis problemas con el tutorial.