Menu di navigazione a discesa basato su Jquery: javascript, jquery, menu a discesa, navigazione

Sto cercando di creare menu a discesa animati (a malapena) "s. I file JS sono disponibili se guardi l'origine della mia pagina. L'ho praticamente funzionante.

La mia domanda è: quando passo con il mouse sopra qualcosa dal menu principale, e poi vado direttamente al sottomenu che si apre (in basso), se poi passo con il mouse su qualcosa in quel menu e lascio che rimarrà.

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

Per essere meno confuso, darò un esempio diretto:

Se passi sopra "Carriere", vai drittosu e giù e passa con il mouse su "Testimonianze dei dipendenti", quindi sposta il mouse verso il basso completamente dal menu, il menu rimane comunque finché non passi nuovamente su "Carriere".

Qualsiasi aiuto sarebbe apprezzato!

MODIFICARE: Sto scoprendo che ha qualcosa a che fare con il a href="# class="subMenuFloat" Ogni volta che passo sopra questi link (sono iquelli nei drop down nascosti) il mio div dropdown rimane. Non riesco a trovare il motivo per cui questo accade, ma se ho semplicemente il puntatore del mouse su Li e mi manca il collegamento, si esce correttamente.

risposte:

demo: http://jsbin.com/welcome/13456

esempio senza usare il plug-in menu, questa è solo una prova di concetto

$(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;
});
});

Questo è un problema comune quando si utilizza il passaggio del mousefunzione in jquery perché il selettore in uso si sta effettivamente spostando da un elemento a un altro. Ecco come l'ho fatto, in pratica hai impostato un div o li all'interno del tuo menu. Esempio:

<ul class="menu-hover">
<li class="menu one">Menu Option One
<div> Here is the drop down menu</div>
</li>
<li class="menu two">Menu Option One
<div> Here is the drop down menu</div>
</li>
</ul>

il jquery sarebbe

Fondamentalmente questo sta dicendo quando passi il mouse sopra unli nel menu, nascondi tutti i div sotto quel menu che sarebbero tutti i menu nel tuo menu a discesa, quindi mostra il div che si trova sotto il li che è sospeso. Dovrai rendere relativa la posizione di li e il div assoluto. Quindi teoricamente il div è contenuto sotto il li e quindi quando si passa il mouse rimarrà aperto.

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

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

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