Menú desplegable con CSS

Vamos a crear un menú desplegable utilizando únicamente CSS. En principio no necesitaremos nada de javascript. Este menú funcionará en las últimas versiones de firefox, chrome, safari, opera, e internet explorer (versión 8). Para que funcione en Internet explorer 7 sólo necesitaremos añadir unos pequeños hacks. En explorer 6 necesitaremos utilizar javascript, puesto que este navegador no reconoce el selector ":hover" en elementos que no sean "a", los cuales no pueden contener elementos de tipo bloque dentro, si queremos cumplir los estándares, claro. Al final se explican los hacks necesarios.

Para comenzar definimos la estructura del menú, basándonos en listas desordenadas (ul, li):

	

		Item 1
		

			

				Option 1
			
			

				Option 2
			
		
	

Cada li tendrá un "a" con clase "item", y si queremos añadirle un submenú, un "ul", en este caso le tendremos que añadir la clase more al "a" por cuestión de estilo, así mostrará una flecha a la derecha, indicando que hay un submenú oculto.

Ahora tenemos que ocultar los submenús desde la hoja de estilos, para eso le añadimos la propiedad "display:none" a los "ul" dentro del "ul" principal:

ul.menu {
	display: inline-block;
	margin: 0;
	padding: 0;
	list-style-type: none;
	white-space: nowrap;
}
ul.menu ul {
	display: none;
}
ul.menu li {
	position: relative;
	display: inline-block;
}
ul.menu ul li {
	display: block;
}

A los li del primer nivel les aplicamos la propiedad "display: inline-block", para que se muesten en una sola línea, a los demás les ponemos "display:block". El primer ul tiene la propiedad "white-space: nowrap", para forzar a que sus "li" no salten de línea. Ahora ya tenemos los submenús ocultos, falta hacerlos aparecer:

ul.menu > li:hover > ul {
	display: block;
	position: absolute;
	top: 100%;
	left: 0;
}

ul.menu ul li:hover > ul {
	display: block;
	position: absolute;
	top: 0;
	left: 100%;
}

Los submenús están posicionados absolutamente con respecto al "li" que los contiene, ya que éstos están posicionados relativamente. En el caso de los submenús del primer nivel los colocamos con "top:100%,left:0", para que salgan justo debajo del item padre. Para los demás submenús ponemos "top: 0; left: 100%", con lo que saldrán justo a la derecha del item padre.

Al final nos quedará algo parecido a esto:

Hacks para Internet explorer 6 y 7:

En Internet explorer 6 y 7, no funciona la propiedad "display: inline-block" en elementos que tienen por defecto display: block, pero con un sencillo truco podemos conseguir el mismo efecto:

ul.menu li {
	position: relative;
	display: inline-block;
	_display: inline;
	_zoom: 1;
	#display: inline;
	#zoom: 1;
}

Para hacer que los submenús aparezcan en internet explorer 6, tendremos que utilizar javascript, como comentábamos al principio. Utilizando la librería jquery, por ejemplo, haríamos lo siguiente:

$("ul.submenu li").hover(
	function () {
		$(this).addClass("hover");
	},
	function () {
		$(this).removeClass("hover");
	}
);

Como tampoco funciona el selector ">" en IE6, necesitaremos hacer unos cambios en la hoja de estilos:

ul.menu li.hover ul {
	display: block;
	position: absolute;
	top: 100%;
	left: 0;
}

ul.menu li.hover ul ul {
	display: none;
}

ul.menu ul li.hover ul {
	display: block;
	position: absolute;
	top: 0;
	left: 100%;
}

ul.menu ul li.hover ul ul {
	display: none;
}

Para probar este menú accede aquí.
Para descargarte los archivos utilizados haz click aquí.