jquery - jqueryホバーフェードオンメニューフェードバックグラウンドの問題

Question

最初はワードプレスを使用していますが、これは使用しているプラ​​ットフォームにすぎません。ヒット状態で発生している問題まで..

サブナビゲーション付きのメインメニュー、メニュー項目をロールオーバーすると、背景にフェードインし、ロールアウトがフェードアウトする別の div があります

しかし、ヒット状態とフェードにいくつかのバグがあり、ロールオーバーするとフェードが完了せず、サブナビゲーションリンクを超えると背景のdivがフェードアウトします...

これは私が使用しているjsです

$("#main-navigation li, #menu-footer-nav li").hover(
  function () {
    $(".nav-overlay-bottom").stop(true).fadeIn('slow');
  }, 
  function () {
    $(".nav-overlay-bottom").stop(true).fadeOut('slow');
  }
);

また、あるメニューでは、他のメニューとは異なる bg div でフェードインすることにも言及する必要があります...

$("#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");

  }
);

私のjsは素晴らしいものではないので、これを書くためのより良い方法があると確信していますか?