保持一個WordPress的子菜單開了幾秒鐘

我有這樣一個WordPress的菜單：保持一個WordPress的子菜單開了幾秒鐘

<div id="top_menu"> 
    <ul class="menu"> 
    <li id="menu-item-1" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1"><a href="moo">moo</a> 
     <ul class="sub-menu"> 
     <li id="menu-item-2" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2"><a href="foo">foo</a></li> 
     <li id="menu-item-3" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3"><a href="bar">bar</a></li> 
     </ul> 
    </li> 
    <li id="menu-item-4" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4"><a href="baz">baz</a></li> 
    </ul> 
</div>

風格是這樣的：

#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」和「bar」來顯示「moo」子菜單。我現在的目標是讓鼠標移出「moo」鏈接區後，讓子菜單保持打開狀態。我怎樣才能做到這一點？

我將不勝感激任何幫助！

來源

2012-08-29 i--

您需要什麼兼容性？例如，css轉換可以工作，但在所有瀏覽器中不兼容。 –

只要它工作並不重要;）我將與jQuery共存，因爲它似乎是最簡單的答案。 –

採用javascript（jQuery的），以顯示子菜單和應用delay()

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

來源

2012-08-29 20:23:18 alexndm

謝謝，但似乎並沒有工作 - 「顯示：」正在從「塊」立即切換到「無」忽略延遲... –

嘗試用fadeOut（） – alexndm

yep替換hide（）。那工作，謝謝！ –

會因爲你提到的CSS發佈此。 http://jsfiddle.net/JBXLr/3/使用css3過渡來實現你想要的。

這是一個替代的JavaScript解決方案，使用jQuery和您當前的CSS。

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

來源

2012-08-29 20:49:00

太棒了，謝謝！ –

保持一個WordPress的子菜單開了幾秒鐘

回答

相關問題