How do I ignore mouse events on child elements in jQuery?

Question

I have an unordered list with mouseover and mouseout events attached to the li elements. Each contains a link and there is a bit of padding in the li. When I mouseover the li the mouseover event is fired, but when I mouseover the link contained in the li the mouseout and the mouseover events are both fired in order. It seems the child elements are firing their parent elements mouse events...how do I go about stopping this? I want it to just stay mouseovered when mousing over the links, not activating the animations every time I mouse over a link. This is my code;

 jQuery(document).ready(function(){       jQuery('#menu li ul').hide();       jQuery('#menu li').mouseover( function() {            jQuery(this).children("ul").show('fast').stop;            return false;       });       jQuery('#menu li').mouseout( function() {            jQuery(this).children("ul").hide('fast').stop;            return false;       });  });   <ul id="menu">       <li><a href="">Some link</a>            <ul>Sub content</ul>       </li>  </ul> 

Answer 1

It seems I've found the answer to my own question. For anyone who might have the same problem; try this code instead. It seems hover doesn't bubble into child elements like the other mouse events do.

jQuery('#menu li').hover(     function() {         jQuery(this).children('ul').show('fast');         return false;     },     function() {         jQuery(this).children('ul').hide('fast');         return false;     } );