title: jQuery mouseover/mouseleave event.stopPropagation()
body: <p>I have a simple navigation menu set up – has three main links, and and if you hover over the 'Work' link, a list of 'Works' are overlay'd over the navigation menu.</p>
  
  <p>I have set up a simple jsFiddle to show you what I have: <a href="http://jsfiddle.net/gM73q/2/" rel="nofollow">http://jsfiddle.net/gM73q/2/</a></p>
  
  <p>One problem I am having is if you are hovered over the title 'Work' (which activates the sub menu), then re-hover over 'Work', the menu fades in and fades out. This is obviously the correct behaviour (as the word 'Work' is on a higher z-index than the menu) but I'd like to be able to hover over 'Work' and the menu still remain.</p>
  
  <p>My JS is as follows:</p>
  
  <pre><code>$('.site-menu-container ul li:first-child a').on('mouseover', function(event) {
      event.stopPropagation();
      $('.site-menu-container .work-menu-container').fadeIn();
  }); 
  $('.site-menu-container .work-menu-container').on('mouseleave', function(event) {
      $(this).fadeOut();
  });
  </code></pre>
  
  <p>Any ideas? I'm sure I have to use <code>event.stopPropagation()</code> but unsure how.</p>
  
  <p>Thanks,
  R </p>