두 번째 레벨 메뉴 축소 방지

Question

내 웹 사이트 용 메뉴가 있습니다. 첫 번째 레벨은 메뉴이지만 문제는 두 번째 레벨 메뉴입니다. 두 번째 수준의 메뉴를 위에서 아래쪽으로 약간 배치 했으므로 마우스를 아래로 움직이기 시작하면 메뉴가 축소됩니다. 두 번째 레벨 메뉴를 현재 위치에서 이동하지 않고 채우기를 원합니다.

여기는 demo입니다. "내 프로필"링크를 마우스로 움직여 마우스를 천천히 두 번째 레벨 메뉴로 이동하십시오. 그 결과 상위 메뉴 li과 하위 ul 사이의 작은 공간 때문에 메뉴가 축소됩니다. 어떻게 그 오류를 해결할 수 있습니까?

JS :

$(document).ready(function() { 
    $(".menu nav ul li").hover(function (e) { 
     $(this).children("ul").slideDown(); 
    }, function (e) { 
     $(this).children("ul").slideUp(); 
    }); 
}); 

HTML :

<header> 
    <div class="welcome_area"> 
     <p>Welcome, <b><a href="profile.php">Arkam Gadet</a> </b> 

     </p> 
    </div> 
    <div class="menu"> 
     <nav> 
      <ul> 
       <li><a href="profile.php">My Profile</a> 

        <ul> 
         <li><a href="#">My Questions</a> 

         </li> 
         <li style="margin-bottom: 5px;"><a href="#">Settings</a> 

         </li> 
        </ul> 
       </li> 
       <li><a href="inbox.php">Inbox</a> 

       </li> 
       <li><a href="#">Notifications</a> 

       </li> 
      </ul> 
     </nav> 
    </div> 
</header> 

CSS :

header { 
    background-color: #eee; 
    height: 45px; 
    box-shadow: 0px 2px 3px 1px #bbb; 
} 
a { 
    color: black; 
    text-decoration: none; 
} 
h2 { 
    color: #f79a1d; 
} 
.welcome_area { 
    float: left; 
    margin-left: 5%; 
} 
.menu { 
    float: right; 
    margin-right: 5%; 
} 
.menu nav > ul { 
    position: relative; 
    padding:0px; 
} 
.menu nav ul li { 
    display: inline; 
    padding: 5px; 
} 
.menu nav ul li a { 
    padding: 2px; 
} 
.menu nav ul li a:hover { 
    background: #eee; 
    border: 0; 
    border-radius: 3px; 
    box-shadow: 0px 0px 2px 1px #000; 
} 
.menu nav > ul ul { 
    position: absolute; 
    left: -30px; 
    top: 40px; 
    padding:0px; 
    width: 150px; 
    border-radius: 3px; 
    display: none; 
    background-color: #eee; 
    box-shadow: 0px 0px 2px 3px #bbb; 
} 
.menu nav > ul li > ul li { 
    display: block; 
} 

Answer 1

감싸고 slideUp에서 당신이 다시 올려 놓으면 타임 아웃 분명 그것은 다음과 같이 실행하기 전에 :

$(document).ready(function() { 
    var t; 
    $(".menu nav ul li").hover(function (e) { 
     if(t) clearTimeout(t); 
     $(this).children("ul").slideDown(); 
    }, function (e) { 
     var $this = $(this); 
     t=setTimeout(function(){$this.children("ul").slideUp();},250); 

    }); 
}); 

바이올린 : http://jsfiddle.net/CfVyQ/2/