problems with jQuery mouseover for better looking css menu

Question

I have a horizontal menu on my site using nice-menus in drupal. When you hover over an li element, a background image is set for the link that displays. The problem I'm having is that this image disappears when you hover over a parent menu item's children. The image that is disappearing is set using this css style:

  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;
  }

I have set up jsbin to test this: http://jsbin.com/ogegu

It looks like it works as expected. The menu expands, and only the parent element seems to be altered when over the child ul. However when I use code that actually attempts to set the background image, the png does not appear.

the menu looks like this (check out the jsbin demo at http://jsbin.com/ogegu ):

<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>

Here is the actual JavaScript that I am trying to use:

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

I am fairly new to using jQuery, can anyone offer a suggestion as to why this isn't doing what I'd expect? Ideally, I would like any hover or mouseover on the menuparent or menuparent's children to set the background of the first a tag that is a child. Even better, would be a solution that uses only css and no JavaScript.

Answer 1

you need to wrap the children inside the parent and then .hover on the parent only. since children is inside the parent, so when you hover the children, you are still hovering the parent. see this example http://www.bunchacode.com/programming/shadow-menu/