Mise en œuvre du menu déroulant jQuery

Question

Comment rendre ce mega-menu (HERE) utilisable?

Je souhaite que les sous-menus 1, 2 et 3 restent visibles tout en les plaçant au-dessus d'eux.

Code sample HERE.

$(".menu-1").hover(function(){ 
    $(".submenu1").stop().slideToggle(700); 
}); 

$(".menu-2").hover(function(){ 
    $(".submenu2").stop().slideToggle(700); 
}); 


$(".menu-3").hover(function(){ 
    $(".submenu3").stop().slideToggle(700); 
}); 

J'apprécie votre aide!

Answer 1

démo en direct travaillant http://jsfiddle.net/LwYuz/3/

$(".menu-1").hover(function(){ 
    $(".submenu1").stop().slideToggle(700); 
}); 


$(".menu-2").hover(function(){ 
    $(".submenu2").stop().slideToggle(700); 
}); 


$(".menu-3").hover(function(){ 
    $(".submenu3").stop().slideToggle(700); 
}); 


$(".submenu1").hover(function(){ 
$(".submenu1").stop().slideToggle(700);  
}); 

$(".submenu2").hover(function(){ 
$(".submenu2").stop().slideToggle(700);  
}); 

$(".submenu3").hover(function(){ 
$(".submenu3").stop().slideToggle(700);  
}); 

Answer 2

Quoi qu'il en soit, assez de ma rage dans la section des commentaires,

Vous pouvez utiliser le jquery multiple sélecteur de classe.

$(".menu-1,.submenu1").hover(function(){ 
    $(".submenu1").stop().slideToggle(700); 
}); 


$(".menu-2,.submenu2").hover(function(){ 
    $(".submenu2").stop().slideToggle(700); 
}); 


$(".menu-3,.submenu3").hover(function(){ 
    $(".submenu3").stop().slideToggle(700); 
}); 

Voici votre solution ... Fiddle mis à jour