Una forma sencilla para lograr rápidamente esos menús con jQuery…
… Una lista sencilla en HTML …
<ul id="dropdown">
<li><a href="#">Link</a>
<ul>
<li><a href="#">sub-link</a></li>
</ul>
</li>
<li><a href="#">Link 2</a>
<ul>
...Luego un poco de jQuery …
$(document).ready(function(){
// Escondo las listas que estan dentro del menu
$("ul#dropdown li ul").hide();
// Aplico la función hover() a los links que son hijos
// directos de los li's que son hijos directos del menu.
$("ul#dropdown > li > a").hover(function(){
// muestro la lista next-sibling del links seleccionado
$(this).next("ul").show();
// Callback ... esconder
}, function(){
$(this).next("ul").hide();
});Lo próximo es hacer que cuando tengamos el mouse sobre una de las listas interiores, se mantengan visibles …
$("ul#dropdown li ul").hover(function(){
$(this).show();
}, function(){
$(this).hide();
});
});… un ejemplo.
excelente :)! ya sabemos donde buscar cuando tengamos eso por hacer!
