将鼠标悬停在子菜单上时防止在导航项上出现jquery背景图像精灵动画

Question

I have the following script which handles the animation of a background image for items in my navigation bar:

$j(function() {
   $j(".menu-item").find(".bottom_nav").hover(function () {
      $j(this).animate( {
         backgroundPosition : '0px 35px'}
      , 300); }
   , function () {
      $j(this).animate( {
         backgroundPosition : '0px 0px'}
      , 600); }
   ); 
});

This works fine, except that when the nav item has a submenu and the user hovers over the submenu I don't want the second animation in this function to fire, ie I would like the backgroundPosition to remain as '0px 35px'. This would work as is, but the submenu is outside of .bottom_nav div. The structure of the markup for the menu/submenu is handled by a Wordpress theme and I'm not sure how to alter this. Here's a screenshot that will give you an idea of the markup:

As you can see <ul class="sub-menu"> is outside of the .bottom_nav div.

You can see the nav item in action on this page . The second item in the navigation bar called "News" has a drop-down submenu, and I would like the background colour on the nav item "News" to stay green when hovering over this submenu.

Answer 1

I sorted this by adding the following:

$j(function() {
   $j(".sub-menu").hover(function () {
      $j(this).closest('.menu-item').find(".bottom_nav").stop().animate( {
         backgroundPosition : '0px 35px'}
      , 300); }
   , function () {
      $j(this).closest('.menu-item').find(".bottom_nav").stop().animate( {
         backgroundPosition : '0px 0px'}
      , 600); }
   ); 
});