Menu desplegable con CSS y HTML

1

Menu desplegable con CSS y HTML

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 sería este:

El nivel de anidamiento es indiferente y tengo comprobado que funciona en todos los navegadores

(salvo lógicamente links). El código HTML es 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 { 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; }

Menu desplegable con CSS y HTML

2

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;

Menu desplegable con CSS y HTML

3

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

Menu desplegable con CSS y HTML

4

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