Se trata ni mas ni menos que de un menú horizontal que se despliega en vertical utilizando para ello solamente hojas de estilo, sin necesidad de javascript.
Lo haremos, como no, utilizando listas. En CSS las listas son una buenisima opción en muchisimos casos, sobre todo tratandose de menus.
El primer paso que se requiere es resetear los margenes y padding de los navegadores, esto lo podemos hacer poniendo al principio del código CSS lo siguiente:
* {
margin: 0px;
padding: 0px;
outline: 0;
}
Ahora veamos el resto del código.
body {
background: #666;
font-family: Verdana, Arial, Helvetica;
}
#menu {
width: 900px;
margin: 20px auto;
text-align: center;
font-size: 0.7em;
font-weight: bold;
}
#menu ul {
list-style-type: none;
}
#menu ul li.nivel1 {
width: 170px;
margin-right: 2px;
float: left;
}
#menu ul li a {
display: block;
padding: 8px;
color: #666;
background-color: #f8f8f8;
border: 1px solid #CCFF33;
text-decoration: none;
position: relative;
}
#menu ul li:hover {
position: relative;
}
#menu ul li a:hover, #menu ul li:hover a.nivel1 {
background-color: #ffc;
color: #666;
position: relative;
}
#menu ul li a.nivel1 {
display: block!important; display none;
position: relative;
}
#menu ul li ul {
display: none;
}
#menu ul li a:hover ul, #menu ul li:hover ul {
display: block;
position: absolute;
left: 0px;
}
#menu ul li ul li a {
width: 168px;
padding: 5px 0px 5px 0px;
border-top-color: #000;
}
#menu ul li ul li a:hover {
border-top-color: #000;
padding:relative;
}
table.falsa {
border-collapse: collapse;
float: left;
border: 0px;
position: relative;
}
Ahora vamos con lo que habría que definir en el documento html, sólo voy a poner un item de la lista, se entiende que cada elemento se colocará de la misma forma.
<div id="menu">
<ul>
<li class="nivel1"> <a href="#" class="nivel1">Link 1</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Link 1<table class="falsa"><tr><td><![endif]-->
<ul>
<li> <a href="#">Link 1.1</a></li>
<li> <a href="#">Link 1.2</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
No COPIES el código sin más, dedicale tiempo a entenderlo, a saber porque se construye así, modifica cosas y comprueba los resultados, así es como se aprende a destripar un código.
Y si en el proceso te surgen dudas recuerda que tenemos un foro a tu disposición.
