Crear un elegante menú desplegable con CSS3

Justo ayer les traía una colección de como se usa la navegación web efectiva, en donde podíamos ver ejemplos de menús de navegación muy originales, pero sobre todo muy útiles. En esta ocasión les traigo un tutorial para hacer un menú desplegable con CSS3, y cabe recalcar que para el menú sólo usamos una imagen de fondo, por lo que les sorprenderá como queda el resultado, sólo hojas de estilo. Después del salto les traigo el código y pueden ver el ejemplo en acción en este enlace.

Nota: el menú sirve con todos los navegadores, sólo que aquellos que soportan CSS3 pueden mostrar sombras, redondez y otros efectos.

CSS3

<style>
/* el menú es una lista */
#nav {
background: #678 url(URL_gradient.png ) repeat-x 0 -110px;
line-height: 100%;
margin: 0;
padding: 7px 6px 0;
border-radius: 2em;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);
-moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);
}
#nav li { /* cada item de esa lista */
float: left;
list-style: none;
margin: 0 5px;
padding: 0 0 8px;
position: relative;
}
/* las definiciones del Nivel Principal */
#nav a {
color: #DDD;
display: block;
font-weight: bold;
margin: 0;
padding: 8px 20px;
text-decoration: none;
-webkit-border-radius: 1.6em;
-moz-border-radius: 1.6em;
text-shadow: 0 1px 1px rgba(0,0,0, .3);
}
#nav a:hover {
background: #000;
color: #FFF;
}
/* efecto hover en el Nivel Principal */
#nav .current a, #nav li:hover > a {
background: #468 url(URL_gradient.png ) repeat-x 0 -40px;
color: #444;
border-top: solid 1px #F8F8F8;
-webkit-box-shadow: 0 1px 1px rgba(0,0,0, .2);
-moz-box-shadow: 0 1px 1px rgba(0,0,0, .2);
box-shadow: 0 1px 1px rgba(0,0,0, .2);
text-shadow: 0 1px 0 rgba(255,255,255, 1);
}
/* los subniveles */
#nav ul li:hover a, #nav li:hover li a {
background: none;
border: none;
color: #333;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
#nav ul a:hover {
background: #456 url(URL_gradient.png ) repeat-x 0 -100px !important;
color: #fff !important;
-webkit-border-radius: 0;
-moz-border-radius: 0;
text-shadow: 0 1px 1px rgba(0,0,0, .1);
}
/* el efecto de desplegar */
#nav li:hover > ul {
display: block;
}
/* las definiciones de los submenues */
#nav ul {
background: #DDD url(URL_gradient.png ) repeat-x 0 0;
border: solid 1px #B4B4B4;
display: none;
left: 0;
margin: 0;
padding: 0;
position: absolute;
top: 35px;
width: 185px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3);
-moz-box-shadow: 0 1px 3px rgba(0,0,0, .3);
box-shadow: 0 1px 3px rgba(0,0,0, .3);
}
#nav ul li {
float: none;
margin: 0;
padding: 0;
}
#nav ul a {
font-weight: normal;
text-shadow: 0 1px 0 #FFF;
}
/* las definiciones de los submenues internos */
#nav ul ul {
left: 181px;
top: -3px;
}
/* bordes redondeados del primer y último item */
#nav ul li:first-child > a {
-webkit-border-top-left-radius: 9px;
-moz-border-radius-topleft: 9px;
-webkit-border-top-right-radius: 9px;
-moz-border-radius-topright: 9px;
}
#nav ul li:last-child > a {
-webkit-border-bottom-left-radius: 9px;
-moz-border-radius-bottomleft: 9px;
-webkit-border-bottom-right-radius: 9px;
-moz-border-radius-bottomright: 9px;
}
/* definiciones generales */
#nav:after {
clear: both;
content: ".";
display: block;
height: 0;
line-height: 0;
visibility: hidden;
}
#nav { display: inline-block; }
html[xmlns] #nav { display: block; }
* html #nav { height: 1%; }
</style>

Esta es la hoja de estilos, podemos ver la estructura para el color y las dimensiones del menú, sólo hay que mencionar que en los estilos que requieren usar una imagen de fondo tienen el nombre URL_gradient.png, tienen que reemplazar ese texto por la dirección de su imagen de fondo que va a actuar como el degradado del menú y de los subelementos cuando el mouse pasa sobre ellos.

HTML

<ul id="nav">
<li class="current"><a href="javascript:void(0);">Inicio</a></li>
<li>
<a href="javascript:void(0);">Menu 1</a>
<ul>
<li>
<a href="javascript:void(0);">Sub Menu 1.1</a>
<ul>
<li><a href="javascript:void(0);">Sub Menu 1.1.1</a></li>
<li><a href="javascript:void(0);">Sub Menu 1.1.2</a></li>
<li><a href="javascript:void(0);">Sub Menu 1.1.3</a></li>
<li><a href="javascript:void(0);">Sub Menu 1.1.4</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0);">Sub Menu 1.2</a>
<ul>
<li><a href="javascript:void(0);">Sub Menu 1.2.1</a></li>
</ul>
</li>
<li><a href="javascript:void(0);">Sub Menu 1.3</a></li>
<li><a href="javascript:void(0);">Sub Menu 1.4</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0);">Menu 2</a>
<ul>
<li>
<a href="javascript:void(0);">Sub Menu 2.1</a>
<ul>
<li><a href="javascript:void(0);">Sub Menu 2.1.1</a></li>
<li><a href="javascript:void(0);">Sub Menu 2.1.2</a></li>
<li><a href="javascript:void(0);">Sub Menu 2.1.3</a></li>
</ul>
</li>
<li><a href="javascript:void(0);">Sub Menu 2.2</a></li>
<li><a href="javascript:void(0);">Sub Menu 2.3</a></li>
<li>
<a href="javascript:void(0);">Sub Menu 2.4</a>
<ul>
<li><a href="javascript:void(0);">Sub Menu 2.4.1</a></li>
<li><a href="javascript:void(0);">Sub Menu 2.4.2</a></li>
<li><a href="javascript:void(0);">Sub Menu 2.4.3</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="javascript:void(0);">Menu 3</a></li>
<li><a href="javascript:void(0);">Menu 4</a></li>
</ul>

Esta es la estructura del menú, y si notas bien el código verás que los elementos están basados es viñetas, además de que con el nombre de los elementos nos podemos guiar para saber la jerarquía del mismo menú. Cabe decir que si quieres poner un link para ir a otra página en los elementos, tienes que reemplazar el texto javascript:void(0); por la dirección web que quieras.

Finalmente terminamos el menú, si ustedes quieren pueden modificar lo que quieran, sólo asegúrense de cambiar correctamente nombres, clases y todo esto, ya que si no se hace podría dejar de funcionar.