Probleme mit jQuery mouseover für besser aussehende css Menü

Question

Ich habe ein horizontales Menü auf meiner Website mit nice-Menüs in Drupal. Wenn Sie den Mauszeiger über ein li-Element bewegen, wird ein Hintergrundbild für den angezeigten Link festgelegt. Das Problem, das ich habe, ist, dass dieses Bild verschwindet, wenn Sie den Mauszeiger über die untergeordneten Elemente eines übergeordneten Menüelements bewegen. Das Bild, das gesetzt ist mit diesem CSS-Stil verschwindet:

ul.nice-menu li a:hover, ul.nice-menu li.active a { 
    background: url(images/bg-li-active.png) no-repeat scroll left bottom; 
    } 

    ul.nice-menu li * a:hover, ul.nice-menu li.active * a { 
    background: none repeat; 
    color:#000000; 
    } 

Ich habe einrichten jsbin dies zu testen: http://jsbin.com/ogegu

Es sieht aus wie es funktioniert wie erwartet. Das Menü wird erweitert und nur das übergeordnete Element scheint geändert zu werden, wenn es über das Kind verschoben wird. Wenn ich jedoch Code verwende, der tatsächlich versucht, das Hintergrundbild festzulegen, wird das PNG nicht angezeigt.

das Menü sieht wie folgt aus (siehe Info jsbin Demo auf http://jsbin.com/ogegu out):

<div class="content"> 
    <ul class="nice-menu nice-menu-down" id="nice-menu-1"><li id="menu-240" class="menu-path-front"><a href="/" title="" class="active">Home</a></li> 
    <li id="menu-660" class="menu-path-node-20"><a href="/content/about-us" title="About Us">About Us</a></li> 
    <li id="menu-238" class="menuparent menu-path-node-3"> 
     <a href="/services" title="">Services</a> 
     <ul> 
     <li id="menu-988" class="menu-path-node-29"><a href="/content/business-advisory" title="Business Advisory">Business Advisory</a></li> 
     <li id="menu-244" class="menu-path-node-10"><a href="/content/network-design" title="Network Design">Network Design</a></li> 
     </ul> 
    </li> 
    <li id="menu-239" class="menu-path-node-2"><a href="/content/clients" title="">Clients</a></li> 
    <li id="menu-327" class="menu-path-partners"><a href="/partners" title="">Partners</a></li> 
    <li id="menu-631" class="menu-path-principals"><a href="/principals">Principals</a></li> 
    </ul> 
</div> 

Hier ist der eigentliche JavaScript, das ich zu verwenden Ich versuche:

jQuery(document).ready(function(){ 
    jQuery('#nice-menu-1 li ul').hide(); 
    jQuery('#nice-menu-1 li.menuparent').hover(function() { 
     jQuery(this).children('ul').show('fast'); 
     jQuery(this).children('a:eq(0)').css({ "background": "url(images/bg-li-active.png) no-repeat scroll left bottom"}); 
     return false; 
    }, 
    function() { 
     jQuery(this).children('ul').hide('fast'); 
     jQuery(this).children('a:eq(0)').css({"background": "none"}); 
     return false; 
    }); 
}); 

Ich bin ziemlich neu in Kann jemand mit jQuery einen Vorschlag machen, warum er nicht das tut, was ich erwarte? Im Idealfall möchte ich jeden Hover oder Mouseover auf den Children des meneparations oder des menparparents setzen, um den Hintergrund des ersten Tags als Kind festzulegen. Noch besser wäre eine Lösung, die nur CSS und kein JavaScript verwendet.

Answer 1

Sie müssen die untergeordneten Elemente in das übergeordnete Element einbinden und dann nur auf das übergeordnete Element .hover. Da Kinder in den Eltern sind, also wenn Sie die Kinder schweben, schweben Sie immer noch über dem Elternteil. siehe dieses Beispiel http://www.bunchacode.com/programming/shadow-menu/