troubles with jQuery mouseleave

Question

I am trying to create a menu with this structure:

<ul id="primary" class="menuOptions">
     <li>Item 1</li>
     <li>Item 2
         <div id="secondary">
            <ul class="menuOptions">
               <li>subItemOne</li>
               <li>subItemTwo</li>
           </ul>
         </div>
     </li>
     <li>Item 3</li>
</ul>

I am animating it with this script:

$j('.menuOptions li').each(function(i){
//applies to all menu options
    $j(this)
   .bind('mouseover',function() {
          $j(this).toggleClass("over");
       })
       .bind('mouseleave',function() {
          $j(this).toggleClass("over");
       });                  
  });

I am finding that the toggleClass function is being called on the primary menu item as the mouse moves over the secondary menu items. I know that mouseleave is not supposed to be called until the mouse is off the children as well, so I am confused.

Do I need to actively stop event propagation somehow?

Thanks!

Tim

Answer 1

Can you try with just using the hover function.

$j('ul.menuOptions li').hover(function(){
          $j(this).toggleClass("over");
       } ,
       function() {
          $j(this).toggleClass("over");
       }
);