나는이 같은 워드 프레스 메뉴가 몇 초

Question

오픈 WordPress의 하위 메뉴를 유지

#top_menu ul li ul{ 
    z-index: 9999; 
    position: absolute; 
    left: -999em; 
    height: auto; 
    top:80px; 
    width:auto; 
    clear:both; 
    border:0; 
    border-top:none; 
} 
#top_menu ul li li { 
    margin:0px; 
    padding:0px; 
    background:none; 
    width:auto; 
} 

#top_menu ul li ul a { 
    width:auto; 
    line-height:26px; 
    font-size:16px; 
    display:block; 
    text-align:left; 
    text-shadow: none; 
} 
#top_menu ul li:hover ul ul, #top_menu ul li:hover ul ul ul, #top_menu ul li.sfhover ul ul, #top_menu ul li.sfhover ul ul ul { 
    left: -999em; 
} 
#top_menu ul li:hover ul, #top_menu ul li li:hover ul, #top_menu ul li li li:hover ul, #top_menu ul li.sfhover ul, #top_menu ul li li.sfhover ul, #top_menu ul li li li.sfhover ul { 
    left: auto; 
} 
#top_menu ul li:hover, #top_menu ul li.sfhover { 
    position: static; 
} 

현재 위치를 볼 수 있습니다 http://jsfiddle.net/JBXLr/1/

이제 foo를 사용하여 "moo"하위 메뉴로 이동하면 막대가 표시됩니다. 내 목표는 이제 마우스를 "moo"-link-out 영역 밖으로 이동시킨 후 2 초를 말하도록 서브 메뉴를 열어 두는 것입니다. 어떻게해야합니까?

어떤 도움을 주셔서 감사합니다.

Answer 1

사용하는 자바 스크립트 (jQuery를)는 하위 메뉴를 표시하고 CSS를 언급 한 이후이 게시가는 delay()

$('#top_menu li').hover(function(){ 
    $('.sub-menu', this).show(); 
}, function(){ 
    $('.sub-menu', this).delay(2000).hide(); 
}); 

Answer 2

적용합니다. http://jsfiddle.net/JBXLr/3/은 원하는 것을 얻기 위해 css3 전환을 사용합니다.

다음은 jquery와 현재 CSS를 사용하는 대체 자바 스크립트 솔루션입니다.

​​​​$("li").mouseout(function(){ 
    var uls =$(this).children("ul"); 
    uls.css("left","auto"); 
setTimeout(function(){ uls.css("left",""); }, 2000); 
});​​​