Menu de navigation déroulant basé sur Jquery

Question

J'essaie de créer un menu déroulant animé (à peine). Les fichiers JS sont disponibles si vous regardez la source de ma page. Je l'ai essentiellement fonctionné.

Ma question est: quand je passe la souris sur quelque chose dans le menu principal, puis aller directement vers le sous-menu qui apparaît (vers le bas), si je puis passe la souris sur quelque chose dans ce menu et laissez-le restera.

http://lmiah.site11.com/slide%20down%20box%20menu%20new/mainTest.html

Pour être moins confus, je vais donner un exemple concret:

Si vous passez la souris sur « Carrières » puis se déplacer vers le bas et plus et vol stationnaire droite sur « Témoignages des employés » puis déplacez votre Si vous fermez le menu complètement, le menu reste jusqu'à ce que vous survoliez de nouveau "Carrières".

Toute aide serait appréciée!

EDIT: Je trouve qu'il a quelque chose à voir avec le a href="# class="subMenuFloat" Chaque fois que je passe la souris sur ces liens (ils sont ceux dans les menus déroulants cachés) ma div déroulante reste. Je ne peux pas trouver pourquoi cela se produit, mais si je survole simplement le li, et que je manque le lien, il se ferme correctement.

Answer 1

Démo:http://jsbin.com/welcome/13456

exemple sans utiliser le menu plugin, c'est juste une preuve de concept

$(function() { 
    var flag = false; 
    $('#mainMenu li.mainMenuItems').hover(function() { 
     if (!flag) 
      $(this).find('.submenu').slideDown(500); 

    }, function() { 
     if (!flag) 
      $(this).find('.submenu').slideUp(500); 
    }); 

    $('#mainMenu li.mainMenuItems .submenu').hover(function() { 
     flag = true; 
    }, function() { 
     $(this).slideUp(500); 
     flag = false; 
    }); 
}); 

Answer 2

Il s'agit d'un problème courant lors de l'utilisation de la fonction de survol dans jquery car le sélecteur que vous utilisez se déplace d'un élément à un autre. Voici comment je l'ai fait, en gros, vous définissez un div ou li dans le li de votre menu. Exemple:

la jquery serait

En gros, cela dit lorsque vous survolez un li dans le menu, cache toute la div dans ce menu qui serait tous les menus dans votre menu déroulant montrent alors la div qui est sous le li qui est plané. Vous devrez faire la position li relative et la div absolue. Donc, en théorie, la div est contenue sous le li et, par conséquent, lorsque vous faites du vol stationnaire, elle reste ouverte.

$(".menu-hover li").hover(function(){ 

//Hide each div on hover 
    $(".menu div").each(function(){ 
    $(this).hide(); 
    }); 

    $("div", this).show(); 
});