Hallo allerseits,
also ich hab ein ziemlich einfaches Menü:
<ul id="navigation">
<li><a href="#">Menüpunkt 1</a>
<ul>
<li><a href="#">Menüpunkt 1.1</a></li>
<li><a href="#">Menüpunkt 1.2</a></li>
</ul>
</li>
<li><a href="#">Menüpunkt 2</a>
<ul>
<li><a href="#">Menüpunkt 2.1</a></li>
<li><a href="#">Menüpunkt 2.2</a></li>
</ul>
</li>
<li><a href="#">Menüpunkt 3</a>
<ul>
<li><a href="#">Menüpunkt 3.1</a></li>
<li><a href="#">Menüpunkt 3.2</a></li>
</ul>
</li>
Mit folgendem Code für jQuery werden jeweils alle Submenüs versteckt, und nur beim Mouseover vom jeweiligem Menüpunkt angezeigt:
$("#navigation li").hover(function() { //Hover over event on list item
$(this).find("ul").show(); //Show the subnav
} , function() { //on hover out...
$(this).find("ul").hide(); //Hide the subnav
});
Funktioniert eigentlich wunderbar. Nur ist das Problem das wenn ich beispielsweise die Maus auf Menüpunkt 1 habe, dann runterfahre auf Menüpunkt 1.2 und von dort aus weiter auf Menüpunkt 2 möchte, sofort das Menü 3 aufspringt und ich erst wieder nach oben zurück muss. Bei dem kleinen Beispiel scheint das unnötig zu sein, aber wenn man sich das ganze mit größeren Navigationen vorstellt, ist es wirklich sehr unpraktisch..
Weiß jemand Rat?
Liebe Grüße