마우스가 submneu에서 멀리 떨어져있을 때 하위 메뉴 숨기기

Question

메뉴 항목 위에 마우스를 올려 놓을 때 나타나는 하위 메뉴를 만들고 싶습니다. 마우스가 서브 메뉴에서 멀어 질 때, 예를 들어 마우스가 웹 사이트의 아래쪽이나 오른쪽 또는 왼쪽으로 이동하는 경우 서브 메뉴가 사라지게하는 문제가 있습니다. 여기

, 나는 jsfiddle http://jsfiddle.net/2jUQS/1/

<div id="header"> 
    <ul id="menu"> 
    <li> 
     <a href="#" class="wordsMenu">About Company</a> 
    </li> 
    <li> 
     <a href="#" class="galaryMenu">Gallary</a> 
    </li> 

</ul> 
</div> 
    <div id="submenus"> 
     <div id="galarySubMenu" class="subMenuContainer"> 
    <ul class="subMenuList"> 
     <li><a href="PhotoGallery.php">Photo Gallary</a></li> 
     <li><a href="videoGallery.php">Video Gallary</a></li> 
    </ul> 
</div> 

</div> 

내 메뉴의 sapmle을 만들고 여기에 스크립트가 당신에게

$("document").ready(function(){ 


    $("a.wordsMenu").bind('mouseover',function(){ 
    $("#galarySubMenu").fadeOut("fast"); 
    }); 

$("a.galaryMenu").bind('mouseover',function(){ 


    $("#galarySubMenu").css("display","block"); 
    var margin_top = $("#header").height(); 
    var testMarginTop=parseInt($("#galarySubMenu").css("top")); 
    if(testMarginTop<0){ 
     $("#galarySubMenu").animate({ 
      'top':margin_top-2 
     }, { 
     'duration':500, 
     queue:false 
    }); 
    } 
    else{ 
     $("#galarySubMenu").animate({ 
      'top':'-300' 
     }, { 
     'duration':500, 
     queue:false 
    }); 
    } 
}); 

/* 
$(".subMenuList").mouseout(function(){ 
     $("#galarySubMenu").fadeOut("fast"); 
}); 
*/ 

}); 

Answer 1

APPEND이 JQuery와 코드 내 메뉴 스크립트의

$("#submenus").on('mouseleave',function(){ 
     $("#galarySubMenu").animate({ 
       'top':'-300' 
      }, { 
      'duration':500, 
      queue:false 
     }) 
    }) 

도움이 되겠습니다.

나는 그냥