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):



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:

menú


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

Comentarios

Comentario de Florence - 26 de Julio de 2011 - 13:59
Muchas gracias! Pero tengo una pregunta sobre el codigo de la librería jquery. Es un script que se pondría en el <head> igual que otro javacsript? Funcciona de por si? Quiero decir que justamente me encunetro con un problema de menu en CSS que no funcciona bajo IE6/7 y mal en IE8...asi que mi pregunta es si con este sencillo codigo funccionaría?
Comentario de Imaginanet - 26 de Julio de 2011 - 15:47
Tienes que ponerlo en el head, claro, y tambi&eacute;n necesitar&aacute;s a&ntilde;adir la librer&iacute;a jquery antes. El c&oacute;digo deber&iacute;a funcionar en cualquier navegador sin ning&uacute;n problema.
Comentario de Ana - 09 de Enero de 2012 - 00:05
Muy buena explicación, has resuelto todas mis dudas de manera clara y sencilla, Gracias!!!
Comentario de diseño web madrid - 17 de Abril de 2012 - 21:43
gracias por el aporte lo llevare a la practica. Es que va todo bien pero no se por que se empeñan los de microsoft en hacer las cosas a su manera..............osea mal......
Comentario de Jimena - 24 de Julio de 2012 - 16:11
Tengo un problema. Cuando quiero posarme sobre mi submenu desaparece... Que puede ser? Solo me ocurre en IE..
Comentario de Imaginanet - 25 de Julio de 2012 - 08:14
IE es especial. Se me ocurre que a veces cuando hay un espaciado, aunque sea pequeño, entre items del submenú, IE ejecuta el evento mouseout como si te salieras del menú. Prueba a ponerle un color de fondo al submenú, si no me equivoco, con ponerle "background-color: transparent" debería bastar.
Comentario de Juan Alberto - 06 de Diciembre de 2013 - 20:35
Se agradece por el codigo, es hora de dar muerte al desatroso navegador internet explorer 6 lamentablemente aun hay personas que utilizan.
Ha habido un error en el envío
Comentario enviado. Será revisado por la moderación antes de ser publicado.

Deja tu comentario

Tu nombre:
Tu email:
Tu comentario:
Nuestra página web utiliza cookies propias y de terceros, para realizar el análisis de la navegación de los usuarios y así poder mejorar nuestros servicios. Si continúas navegando, consideramos que aceptas su uso. Puedes cambiar la configuración u obtener más información aquí