title: jquery hover fade on menu fade background issues
body: <p>first off am using wordpress but this is just the platform am using.
  down to the issue am having with hit states..</p>
  
  <p>main menu with sub nav, when rollover a menu item there is a separate div which fades in the background and rollout fades out</p>
  
  <p>but there is a few bugs am having with the hit states and the fading
  if you rolover to quickly then the fade is not complete and if over a sub nav link it fades the background div out...</p>
  
  <p>this is js am using to </p>
  
  <pre><code>$("#main-navigation li, #menu-footer-nav li").hover(
    function () {
      $(".nav-overlay-bottom").stop(true).fadeIn('slow');
    }, 
    function () {
      $(".nav-overlay-bottom").stop(true).fadeOut('slow');
    }
  );
  </code></pre>
  
  <p>i should also mention that on one menu it fades in a different bg div than the rest...</p>
  
  <pre><code>$("#menu-item-1260").hover( function () {
      $(".nav-overlay").stop(true).fadeIn('slow');
          //$("#header").addClass("border-hover-top");
    }, 
    function () {
      $(".nav-overlay").stop(true).fadeOut('slow');
          //$("#header").removeClass("border-hover-top");
  
    }
  );
  </code></pre>
  
  <p>my js is not great so am sure there is a better way to write this ?</p>