Menú Desplegable con CSS

Todos hemos visto alguna vez una página web con un menú desplegable que nos dejó asombrados la primera vez que lo vimos.

Bueno he aquí una pequeña guía para hacer un menú de esos usando solo HTML y CSS, sin flash ni trucos raros.

1.- Lo primero que haremos es hacer una lista no ordenada que contendrá los items del menú:

<ul id="menu">
 <li><a href="#">Item 1</a>
    <ul>
       <li><a href="#">Item 1.1</a></li>
       <li><a href="#">Item 1.2</a></li>
       <li><a href="#">Item 1.3</a></li>
       <li><a href="#">Item 1.4</a></li>
    </ul>
 </li>
 <li><a href="#">Item 2</a></li>
 <li><a href="#">Item 3</a>
    <ul>
       <li><a href="#">Item 3.1</a></li>
       <li><a href="#">Item 3.2</a></li>
       <li><a href="#">Item 3.3</a></li>
       <li><a href="#">Item 3.4</a></li>
    </ul>
 </li>
 <li><a href="#">Item 4</a></li>
</ul>

2.- Luego empieza el desarrollo de la hoja de estilo (CSS) encargada del funcionamiento del menú:

ul.menu , ul.menu li ul{
width: 100%;
list-style-type: none;
margin: 0;
padding: 0;
border-top: 1px solid #bababa;
background: white;
}

ul.menu li{
float: left;
position: relative;
border-bottom: 1px solid #bababa;
border-right: 1px solid #bababa;
border-left: 1px solid #bababa;
}

ul.menu li a{
display: block;
width: 146px;
padding: 2px;
text-decoration: none;
color: black;
font-weight: bold;
}

ul.menu li a:hover{
background-color: #7abedf;
color: white;
}

ul.menu li ul{
display: none;
position: absolute;
top: -1px;
left: 150px;
}

ul.menu li:hover ul{
display: block;
}

Ya con esto es suficiente para tener un menú funcional en cualquier navegador decente (léase cualquiera que no sea Internet Explorer). Para hacerlo funcionar en IE es necesario recurrir a javascript y cambiar un poco la hoja de estilo.

4.- El cambio en la hoja de estilo no es gran cosa, solo se agrega la clase "mostrar":

ul.menu li ul.mostrar{
display: block;
}

5.- La función de javascript que usaremos la llamaremos cambiarClase y es la que sigue:

<script>
function cambiarClase(obj,clase){
 document.getElementById(obj).className=clase;
}
</script>

6.- Luego hay que asignarle nombre a todos los submenú existentes haciendo uso de la propiedad id y añadir los eventos de javascript a los items correspondientes:

<ul id="menu">
 <li onMouseOver="cambiarClase('submenu1','mostrar');" 
onMouseOut="cambiarClase('submenu1','');"><a href="#">Item 1</a>
    <ul id='submenu1'>
       <li><a href="#">Item 1.1</a></li>
       <li><a href="#">Item 1.2</a></li>
    </ul>
 </li>
 <li><a href="#">Item 2</a></li>
 <li onMouseOver="cambiarClase('submenu3','mostrar');"
onMouseOut="cambiarClase('submenu3','');"><a href="#">Item 3</a>
    <ul id='submenu3'>
       <li><a href="#">Item 3.1</a></li>
       <li><a href="#">Item 3.2</a></li>
       <li><a href="#">Item 3.3</a></li>
       <li><a href="#">Item 3.4</a></li>
    </ul>
 </li>
 <li><a href="#">Item 4</a></li>
</ul>

Con esto es suficiente para que el menú funcione en cualquier navegador.
Se puede ver un ejemplo totalmente funcional aquí