Crear menu desplegable con CSS

Hoy vamos a ver como crear un menú desplegable sin nada mas que nuestro HTML y CSS. Realmente la técnica no es complicada, simplemente se basa en una lista que hace de menú y listas anidadas para los submenus.

Podeis ver una demo del resultado final

Aquí no voy a publicar todo el código por que sería demasiado largo así que descargadlo y nos metemos en harina.

HTML

La parte HTML es muy sencilla, solo hay que atender a la lógica. Lo que hemos hecho es construir un menú mediante una lista sin orden (<ul>) y anidar otra lista en los elementos que van a ser desplegables. Vamos a ver un extracto:

<ul id="menu">
    <li><a href="#">Boton 1</a>
        <ul>
            <li><a href="#">Submenu Boton 1</a></li>
            <li><a href="#">Submenu Boton 2</a></li>
            <li><a href="#">Submenu Boton 3</a></li>
        </ul>
    </li>
</ul>

CSS

Para los que no hayáis construido nunca un menú horizontal, se basa en eliminar las bullets de la lista y hacer que los elementos (<li>) floten hacia la izquierda.

ul{
	list-style:none;
	}
ul#menu li{
	float:left;
	}

En nuestro caso, como tenemos listas anidadas, vamos a asignarles una posición absoluta ajustada a la izquierda y vamos a ocultarlas. Tambien debemos asignarle una posición relativa a los <li> del menú principal para que hagan de referencia para el menú anidado.

ul#menu li{
	float:left;
	position:relative;
	}
ul#menu ul{
	position:absolute;
	left:0;
	display:none;
	}

Ahora llegamos al nucleo del asunto, a la técnica que crea los menús desplegables.

Se basa en que cuando ponemos el ratón encima de un <li> de la lista principal, la propiedad display de la lista anidada cambia a block. Para ello hacemos uso del pseudo selector :hover

ul#menu li:hover ul{
	display:block;
}

¡Está vivo!

Ahí tenemos lo básico para tener el menú funcionando perfectamente, pero como ya avisé al principio, no quería poner aquí todas las CSS ni el HTML completo para no extenderme demasiado.

En el resultado final, yo he optado por darle color a todos los botones e incluso añadir una imagen de una flecha en los menús desplegables para dar una indicación de que hay mas información, así que descargaos el código y toquetearlo.

Espero que haya sido de utilidad.

Link: Descargar código | Demo

&lt;div class=&quot;menuContainer&quot;&gt;<br />
<br />
&lt;ul id=&quot;menu&quot;&gt;<br />
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Progamaci&oacute;n &lt;img src=&quot;arrow.png&quot; width=&quot;12&quot; height=&quot;12&quot; alt=&quot;desplegable&quot; /&gt;&lt;/a&gt;<br />
&lt;ul&gt;<br />
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;PHP&lt;/a&gt;&lt;/li&gt;<br />
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;ASP&lt;/a&gt;&lt;/li&gt;<br />
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;JavaScript&lt;/a&gt;&lt;/li&gt;<br />
&lt;/ul&gt;<br />
&lt;/li&gt;<br />
<br />
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;SEO&lt;/a&gt;&lt;/li&gt;<br />
<br />
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Dise&ntilde;o &lt;img src=&quot;arrow.png&quot; width=&quot;12&quot; height=&quot;12&quot; alt=&quot;desplegable&quot; /&gt;&lt;/a&gt;<br />
&lt;ul&gt;<br />
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Interfaz&lt;/a&gt;&lt;/li&gt;<br />
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Plantillas&lt;/a&gt;&lt;/li&gt;<br />
&lt;/ul&gt;<br />
&lt;/li&gt;<br />
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Publicidad&lt;/a&gt;&lt;/li&gt;<br />
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Contacto&lt;/a&gt;&lt;/li&gt;<br />
&lt;/ul&gt;<br />
&lt;div class=&quot;clear&quot;&gt;&lt;/div&gt;<br />
&lt;/div&gt;<br />