Menu Drop Down (Desplegable) con jQuery - Tutorial

Un menú bonito e intuitivo es crucial, ademas de mejorar la imagen del sitio le da al visitante mayor poder sobre la navegación dentro del sitio, permitiendole encontrar de manera mas fácil y común el contenido que le interesa.
Una solución es usar un menú liviano y fácil de implementar usando mi muy querido jQuery y CSS básicamente.

Como suele pasar en estos tutoriales, son solo introductorios, las mejoras al mismo deberán ser guiadas por tu creatividad, aquí solo te doy un empujón para iniciar.
Comencemos con decir que el menú usará UL's (Listas desordenadas) para las opciones del mismo como en el código a continuación:

<ul class="navigation">
<li><a href="#">Main Cat 1</a></li>
<li><a href="#">Main Cat 2 </a>
<ul><li><a href="#">Sub Cat 2-1</a></li>
<li><a href="#">Sub Cat 2-2</a></li>
<li><a href="#">Sub Cat 2-3</a></li>
<li><a href="#">Sub Cat 2-4</a></li>
<li><a href="#">Sub Cat 2-5</a></li>
</ul><
div class="clear"></div></li>
<li><a href="#">Main Cat 3 </a>
<ul><li><a href="#">Sub Cat 3-1</a></li>
<li><a href="#">Sub Cat 3-2</a></li>
<li><a href="#">Sub Cat 3-3</a></li>
<li><a href="#">Sub Cat 3-4</a></li>
<li><a href="#">Sub Cat 3-5</a></li>
<li><a href="#">Sub Cat 3-6</a></li>
<li><a href="#">Sub Cat 3-7</a></li>
</ul><div class="clear"></div>
</li>
<li><a href="#">Main Cat </a></li>
</ul>​

CSS

Ahora procedemos a la programación del CSS, comenzaremos por definir la fuente y el tamaño desde la etiqueta body:
body{font-family: Arial, Helvetica,sans-serif;font-size:15px;}​

Después de definir esto comenzamos con la parte visual del menu, modificando la clasenavigation del UL eliminando los margenes y eliminando los circulos de las listas desordenadas con list-style.

.navigation {margin:0;padding:0;list-style:none;}​


Ahora modificaremos el tag LI, basicamente lo que haremos será hacer el menu horizontal con el float:left, le daremos un ancho y una posicion relativa

.navigation li {float:left;width:150px;position:relative;}


Damos el formato a los enlaces del menu, como el color de fondo, de texto, el padding, etc.

.navigation li a {
background:#262626;
color:#fff;
display:block;
padding:8px 7px 8px 7px;
text-decoration:none;
border-top:1px solid #F2861D;
text-align:center;
text-transform:uppercase;
} 


Y ahora haremos hacemos el efecto en el menú para cuando el cursor se situa sobre cada opción del mismo, para eso usamos el a:hover haciendo que cambie el color del texto

.navigation li a:hover {color:#F2861D;}


Hasta aquí el menú debería funcionar de forma básica pero falta agregar algunas cosas como el ocultar los submenus, estos no deben mostrarse hasta que el menú raíz del mismo es seleccionado o apuntado.

.navigation ul {
position:absolute;
left:0;
display:none;
margin:0 0 0 -1px;
padding:0;
list-style:none;
border-bottom:3px solid #F2861D;
}

.navigation ul li {
width:150px;
float:left;
border-top:none;
}

.navigation ul a {
display:block;
height:15px;
padding:8px 7px 13px 7px;
color:#fff;
text-decoration:none;
border-top:none;
border-bottom:1px dashed #6B6B6B;
}

.navigation ul a:hover {color:#F2861D;}


Bien, ahora nuestro menú se ve mas profesional, pero ¿que tal unos ultimos ajustes para mejorarlo?, va
/* Definiendo la fuente y el tamaño del texto del sitio en general */
body{font-family: Arial, Helvetica,sans-serif;font-size:15px;}/* Eliminando margenes y el estilo de lista */
.navigation {margin:0;padding:0;list-style:none;}/* Ajustes de posicion */
.navigation li {float:left; /* Mostrando la lista en una sola linea (Horizontal) */width:150px;position:relative;}

/* Jugando con las categorias Raiz */
.navigation li a {
background:#262626;
color:#fff;
display:block; 
/* Asegurando que el link cubra todo el LI */
padding:8px 7px 8px 7px;text-decoration:none; 
/* Quita el subrayado de links */
border-top:1px solid #F2861D;
text-align:center;
text-transform:uppercase;
}
.navigation li a:hover {color:#F2861D;}

/* Ajustes */
.navigation ul {
position:absolute;left:0;display:none;margin:0 0 0 -1px;padding:0;list-style:none;border-bottom:3px solid #F2861D;}.navigation ul li {width:150px;float:left;border-top:none;}
/* Propiedades de sub categorias */
.navigation ul a {display:block; height:15px;padding:8px 7px 13px 7px;color:#fff;text-decoration:none;border-top:none;border-bottom:1px dashed #6B6B6B;}
.navigation ul a:hover {color:#F2861D;}​



jQuery

Después de todo lo anterior comencemos con la magia, como podrán darse cuenta soy un fanático y admirador de jQuery y su poder, ligereza, versatilidad, etc.. así que comenzamos con el :-D
 
Primero llamamos a jQuery, ya sea que lo tengas en local o desde los muchos servidores donde se almacena (Yo recomiendo alguno de google)
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>​


Aqui el código Javascript a utilizar
<script type="text/javascript">// Ejecutamos el DOM cuando el sitio este cargado completamente
$(document).ready(function () {

$('.navigation li').hover(function () {
//Esto nos dara el efecto de Fade en el submenu
    $('ul', this).fadeIn(); // fadeIn muestra progresivamente un item oculto
},function () {
    $('ul', this).fadeOut(); // fadeOut vuelve a ocultar el submenu
});
});
</script>​

y LISTO, debería funcionar, a continuación te pongo el código completo para un mejor entendimiento del mismo, espero te haya servido el tutorial y lo recomiendes ademas de que espero tus comentarios al respecto

<html>
<head>
<title>jQuery Drop Down Menu</title>
<script type="text/javascript" src="/jquery.js"></script>
<script type="text/javascript">
// Ejecutamos la funcion ya que se cargo el documento
$(document).ready(function () {
// propiedad hover es el evento para cuando el mouse se coloca encima o quita del objeto
$('.navigation li').hover(
// Cuando el mouse entra se aplica el fadeIn al UL
function () {
//Fade in the navigation submenu
$('ul', this).fadeIn(); // fadeIn will show the sub cat menu
},
// Cuando el mouse se quita se oculta el UL
function () {
//Fade out the navigation submenu
$('ul', this).fadeOut(); // fadeOut will hide the sub cat menu
}
);
});
</script>

<style type="text/css">

/* Configurando la fuente y tamaño */
body{
font-family: Arial, Helvetica,sans-serif;
font-size:15px;
}

/* Ajustando margenes, padding y quitando los bullet de los menus */
.navigation {
margin:0;
padding:0;
list-style:none;
}

/* ajustando las etiquetas li */
.navigation li {
float:left; /* Mostrando los elementos en la misma linea */
width:150px;
position:relative;
}

/* Jugando con las categorias principales */
.navigation li a {
background:#262626;
color:#fff;
display:block; /* Haciendo que el link cubra todo el elemento li */
padding:8px 7px 8px 7px;
text-decoration:none; /* Quita subrayado al link */
border-top:1px solid #F2861D;
text-align:center;
text-transform:uppercase;
}
.navigation li a:hover {
color:#F2861D;
}

/* Submenu*/
.navigation ul {
position:absolute;
left:0;
display:none; /* Por defecto oculto */
margin:0 0 0 -1px;
padding:0;
list-style:none;
border-bottom:3px solid #F2861D;
}

.navigation ul li {
width:150px;
float:left;
border-top:none;
}

/* Propiedades de los links en los submenus */
.navigation ul a {
display:block; /* Haciendo que el link cubra todo el elemento li */
height:15px;
padding:8px 7px 13px 7px;
color:#fff;
text-decoration:none;
border-top:none;
border-bottom:1px dashed #6B6B6B;
}

.navigation ul a:hover {
color:#F2861D;
}
</style>
</head>
<body>
<ul class="navigation">
<li><a href="#">Main Cat 1</a></li>
<li><a href="#">Main Cat 2 </a>
<ul>
<li><a href="#">Sub Cat 2-1</a></li>
<li><a href="#">Sub Cat 2-2</a></li>
<li><a href="#">Sub Cat 2-3</a></li>
<li><a href="#">Sub Cat 2-4</a></li>
<li><a href="#">Sub Cat 2-5</a></li>
</ul>
<div class="clear"></div>
</li>
<li><a href="#">Main Cat 3 </a>
<ul>
<li><a href="#">Sub Cat 3-1</a></li>
<li><a href="#">Sub Cat 3-2</a></li>
<li><a href="#">Sub Cat 3-3</a></li>
<li><a href="#">Sub Cat 3-4</a></li>
<li><a href="#">Sub Cat 3-5</a></li>
<li><a href="#">Sub Cat 3-6</a></li>
<li><a href="#">Sub Cat 3-7</a></li>
</ul>
<div class="clear"></div>
</li>
<li><a href="#">Main Cat </a></li>
</ul>
<div class="clear"></div>
</body>
</html>​


Sigueme: @Javi_Mata