Alojate.com Tu Proveedor de Web Hosting, Dominios, VPS, Factura Electrónica y Marketing para Buscadores en México

Ya vimos como hacer un menu con submenus , 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:

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 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;
}

Fuente de Informacion:
www.lawebera.es