title: How can I prevent jQuery event stacking for my menu system?
body: <p>I've built a menu that uses a hover function to show children menu items. There are a few parents which have children, and one that has grandchildren. My problem is that if you rapidly hover over the parent menu items a few times and then move the mouse away they will continue to keep on fading in and out.</p>
  
  <p>This is very annoying, how can I stop it?</p>
  
  <p>The jQuery currently looks like this:</p>
  
  <pre><code>$(document).ready(function(){
          $('menu li').hover(function () {
                  $(this).children('ul').fadeIn();
              }, function () {
                  $(this).children('ul').fadeOut(5000);
              });
      });
  </code></pre>
  
  <p>I've popped it all in a jsfiddle here: <a href="http://jsfiddle.net/8gsb5/" rel="nofollow">http://jsfiddle.net/8gsb5/</a></p>
  
  <p>Any help would be greatly appreciated, thanks.</p>