Menu desplegable con CSS y HTML

Actualizado el 14/12/2009 < > 15 Cometarios

Resúmen: Un recurso muy utilizado en web son los menús horizontales y verticales, veamos como hacer menus desplegables con CSS y HTML.

Meneame Bitacoras

Ya vimos como hacer un menu con submenus en LaWebera.es, ahora vamos a retomar el tema.

Un recurso muy utilizado en web son los menús horizontales y verticales (menus desplegables o menús con submenús), y realmente los que más problemas nos presentan son estos últimos debido a la incompatibilidad de algunos navegadores que no siguen los estándares. Existen diversas formas de llevar a cabo los menús horizontales con elementos anidados: desde mostrar los submenús con javascript, hasta hacerlo directamente con CSS. En esta ocasión trataré de explicar como se crea un menú con esta última opción, por su portabilidad además que nos va a ser indiferente que el cliente tenga o no Javascript en su navegador. El resultado final debería ser algo como lo que se ve en la imagen:

Menu multinivel en CSS y HTML

El nivel de anidamiento es indiferente y tengo comprobado que funciona en todos los navegadores (salvo lógicamente links). El código HTML es bastante simple, para anidar sub-menús simplemente se inserta una estructura <ul><li></li></ul> dentro de los <li> así la hoja de estilos (que también adjunto) recoja la estructura correcta y muestre nuestro precioso menú. Ahí va el código html.

<ul id="menu">
	<li><a class="selected" tihref="#">Inicio</a></li>
	<li><a href="#">Descargas</a>
		<ul>
			<li><a href="#">Soft Desktop</a></li>
			<li><a href="#">Soft Móvil</a></li>
		</ul>
</li>
<li><a href="#">Localización</a></li>
<li><a href="#">Contacto</a></li>
</ul>

Y aquí el código CSS:

body{
	background:#fff;
}

/* Root = Horizontal, Secondary = Vertical */
ul#menu {
	ba
  margin: 0;
  border: 0 none;
  padding: 0;
/*  width: 500px;*/ /*For KHTML*/
width:360px;
  list-style: none;
  height: 20px;
  border:1px solid #eee;
  padding-bottom:5px;
}

ul#menu li {
  margin: 0;
  border: 0 none;
  padding: 0;
  float: left; /*For Gecko*/
  display: inline;
  list-style: none;
  position: relative;
  height: 20px;
}
ul#menu li{
	padding-bottom:5px;
}
ul#menu li:hover{
	background:#ddd;
}

ul#menu  ul {
  margin: 0;
  border: 0 none;
  padding: 0;
  width: 160px;
  list-style: none;
  display: none;
  position: absolute;
  top: 25px;
  left: 10px;
  background: #eee;
  border: none;
  opacity: 0.8;
  -moz-opacity: 0.8;
  filter:alpha(opacity=80);
}

ul#menu ul:after /*From IE 7 lack of compliance*/{
  clear: both;
  display: block;
  font: 1px/0px serif;
  content: ".";
  height: 0;
  visibility: hidden;
}

ul#menu ul li {
  width: 160px;
  float: left; /*For IE 7 lack of compliance*/
  display: block !important;
  display: inline; /*For IE*/
}

/* Root Menu */
ul#menu a {
  padding: 5px 15px 5px;
  float: none !important; /*For Opera*/
  float: left; /*For IE*/
  display: block;
  color: #9fcf21;
  text-decoration: none;
  font-weight: bold;
  font-family:Arial, Helvetica, sans-serif;
  font-size:12px;
  font-weight:bold;
/*  border-right:1px solid #818181;*/
  text-decoration: none;
  height: auto !important;
  height: 1%; /*For IE*/
}

/* Root Menu Hover Persistence */
ul#menu a:hover,
ul#menu li:hover a,
ul#menu li.iehover a {
color: #003300;

}

/* 2nd Menu */
ul#menu li:hover li a,
ul#menu li.iehover li a {
  float: none;
  border:none;
}

/* 2nd Menu Hover Persistence */
ul#menu li:hover li a:hover,
ul#menu li:hover li:hover a,
ul#menu li.iehover li a:hover,
ul#menu li.iehover li.iehover a {
 background:#ddd;
  color: #003300;
}

/* 3rd Menu */
ul#menu li:hover li:hover li a,
ul#menu li.iehover li.iehover li a {
  background: #EEE;
  color: #666;
}

/* 3rd Menu Hover Persistence */

ul#menu li:hover li:hover li a:hover,
ul#menu li:hover li:hover li:hover a,
ul#menu li.iehover li.iehover li a:hover,
ul#menu li.iehover li.iehover li.iehover a {
background:#ddd;
  color: #FFF;
}

/* 4th Menu */
ul#menu li:hover li:hover li:hover li a,
ul#menu li.iehover li.iehover li.iehover li a {
background:#ddd;
  color: #666;
}

/* 4th Menu Hover */
ul#menu li:hover li:hover li:hover li a:hover,
ul#menu li.iehover li.iehover li.iehover li a:hover {
  background: #CCC;
  color: #FFF;
}

ul#menu ul ul,
ul#menu ul ul ul {
  display: none;
  position: absolute;
  top: 0;
  left: 160px;
}

/* Do Not Move - Must Come Before display:block for Gecko */
ul#menu li:hover ul ul,
ul#menu li:hover ul ul ul,
ul#menu li.iehover ul ul,
ul#menu li.iehover ul ul ul {
  display: none;
}

ul#menu li:hover ul,
ul#menu ul li:hover ul,
ul#menu ul ul li:hover ul,
ul#menu li.iehover ul,
ul#menu ul li.iehover ul,
ul#menu ul ul li.iehover ul {
  display: block;
}
ul#menu .selected{
	color: #003300;
}

Meneame Bitacoras

Publicado el 14/12/2009, última actualización 14/12/2009.

Seguir @lawebera

Autor: Fran Diéguez

URL: Mabishu.com

Añadir Comentario (Subir al texto)

15 Cometarios

Código listo para hacer un menú desplegable con XHTML y CSS
[...] sobre creación de menús, puedes encontrarlos aquí: diseño de menús ys submenús con CSS, menú desplegable con CSS y HTML, menu rollover con CSS y una sola [...]

Viernes, 30 de abril 2010
Maquetación de páginas web: crear un menu horizontal con CSS
[...] y submenús con CSS, menú desplegable con CSS y menu desplegable con XHTML y [...]

Jueves, 10 de junio 2010
Isa
hola, probe el codigo pero no se me abre el sub-menu de Descargas. QUe podra ser? Hice copy-paste del codigo publicado tanto en el html como en la hoja CSS. Podra ser el navegador? Cualquier aporte , sera bienvenido. Muchas gracias!!!!!!!

Viernes, 8 de octubre 2010
Alberto
Hola,primero muchas gracias por el post.

Lo he implementado en mi página y funciona muy bien en todos los navegadores menos en el explorer.
Antes utilicé un jquery para el menú, pero tampoco funcionaba en el explorer.
Se está convirtiendo en toda una odisea lograr tener un sencillo menú desplegable que funcione para IE.
Si alguien conoce alguna manera de lograrlo, y no le importa compartirlo, le estaría muy agradecido si me lo comunicase.

Gracias!!!!!

Sábado, 30 de octubre 2010
Barbara
Hola,

Ante todo dar las gracias por el post. Es un menu desplegable sencillo y facil de implementar. Pero como comenta Alberto en IE no funciona. Si alguien puede solucionar el problema o ayudarnos a mejorarlo se lo agradeceria.

Estoy realizando una pagina web y este menu desplegable es muy importante.

Gracias de antemano!

Martes, 16 de noviembre 2010
JuliosScience
buen post…. me ayudo bastante… gracias!!!

Martes, 4 de enero 2011
Atr
Para los que lean en el futuro este post.

Si añadís lo siguiente os funcionara en IE ;-) Espero que a alguien le sirva en el futuro.

Martes, 18 de enero 2011
Atr
bueno, parece que no aparece. Lo que trataba de poner era el doctype (con el strict.dtd funciona bien)

Martes, 18 de enero 2011
jos
van los simbolos de mayor y menor :)

Martes, 25 de enero 2011
Verónica Milán
El doctype que comenta Atr, lo podéis encontrar aquí: http://www.lawebera.es/de0/html-doctype-version-documento-pagina-web.php

Saludos!

Lunes, 7 de febrero 2011
Eugenio
estupendo el menu
pero me estoy volviendo loco para ponerlo en vertical
alguien lo hizo?
gracias

Domingo, 26 de junio 2011
Enrique
De verdad me ayudaste mucho :) lo estoy utilizando para un diseño web. Gracias!!

Jueves, 14 de julio 2011
aksmnlas
Me ayudaste mucho, gracias :D

Miércoles, 3 de agosto 2011
Justinfox
Bien! me ayudo bastante buen aporte aunque en el principio no me salio y no vi los comentarios, al final vi el comentario de Atr y Good!! salio!, Gracias totales! nos facilitan la vida.

Miércoles, 7 de septiembre 2011
Lauri
Genial el menú, sencillísimo de poner!

Una pregunta, ¿Cómo hago para que el submenú que se despliega, las opciones aparezcan en horizontal también? He probado lo de display inline pero no me ha dado resultado :(

Graciass un saludo!

Lunes, 19 de diciembre 2011

(Subir al texto)

Añadir Comentario

Menu desplegable con CSS y HTML

Manuales y Artículos Web