我有一個沒有Javascript的CSS3導航菜單，我喜歡它現在的樣子，但有一個問題，用戶是感到困擾它。如何確保我的子菜單在消失前懸停或添加延遲時不會消失
問題是，當用戶將鼠標懸停在菜單鏈接上時，彈出的子菜單實際上是我想要的，但如果用戶將鼠標箭頭從子菜單或菜單鏈接移開，則它的修復ULTRA速度很快。這是非常煩人的，我不知道如何解決這個問題，有兩種解決方案的一種方法是總是顯示子菜單另一種解決方案是，當用戶從子菜單懸停出來時，子菜單應該至少等待5-10秒，然後消失，同樣，如果您將鼠標懸停並將鼠標懸停在子菜單上，應該保留。但我不知道該怎麼做。
下面是代碼和示例試用，任何解決方案都是讚賞的！
http://jsfiddle.net/nPdNd/擴大的jsfiddle結果窗口看到整個導航菜單
提前感謝！
實施例：http://jsfiddle.net/nPdNd/40/
使用jQuery
$(document).ready(function(){
var clearli;
$(".test").hover(function() {
clearTimeout(clearli);
$("ul#nav li").removeClass('current');
$(this).addClass('current');
}, function() {
var getthis = $(this);
clearli = setTimeout(function() {
$(getthis).removeClass('current');
}, 500);
});
});
更改的CSS
ul#nav li:hover > ul {到ul#nav li.current > ul {
ul#nav li:hover > ul li a {到ul#nav li.current > ul li a {
編輯：我改變了選擇器由於一個錯誤.test和增加了類測試<li>
編輯2：我覺得愚蠢，我忘了停止超時計數器。上面編輯。
多解存在解決您的問題：
使用CSS-過渡耽誤你的子菜單消失（你在聊天中提到，您不必訪問樣式...也許嘗試使用內聯造型？這是不是最好的辦法，但也許你可以住在一起）：
http://www.w3schools.com/css3/css3_transitions.asp
如果您有jQuery的，你可以使用.animate()做 同樣的事情：
在.stop()看看太：
如果一切都失敗了，你可以嘗試用setTimeout();
我一直在玩所有三個人，但我只是不能讓它上班 – Obsivus 2012-04-20 10:36:51
http://w3fools.com ..讀它 – 2012-05-15 21:36:48
這是玩弄只有一個例子 - http://jsfiddle.net/nPdNd/22/
我建議你嘗試自己，直到你得到
這個例子是基於mouseenter/mouseleave事件所需的結果：
$("#nav li").mouseenter(function(){
$(this).children('#sub').show("slide", { direction: "up" }, 300);
});
$("#nav li,#sub").mouseleave(function(){
$(this).children('#sub').hide("slide", { direction: "up" }, 300);
});
它也用了jQuery UI
合，這裏是你的jsfiddle修改：現在http://jsfiddle.net/Ralt/nPdNd/25/
，你CA ñ看，它遠非完美。你不應該更改樣式屬性，而是添加，然後刪除類，但你得到的是如何做到這一點的想法。
不，我不知道如何去做 – Obsivus 2012-04-23 09:02:49
請你頁面中添加這個腳本，這是簡單的方法 第1步 -
添加COMON的jQuery在你頁面
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
第1步 - 在您的網頁添加該腳本 -
<script type="text/javascript">
jQuery(document).ready(function() {
$('ul#nav li').hover(function()
{
$(this).find('ul').stop(true,true).slideDown()
},
function()
{
$(this).find('ul').stop(true,true).slideUp()
});
});
</script>
我確實在你的css中幾乎沒有變化
演示http://jsfiddle.net/nPdNd/28/
代碼（李：懸停）不行IE6，並û檢查呢？
檢查它.... http://jsfiddle.net/lakshmipriya/nPdNd/31/
這個速度對你來說是否合適....
是的，但是當你將鼠標懸停在菜單鏈接上時，如果鼠標懸停在子菜單消失並懸停進入時懸停，子菜單將打開， 。如果您將鼠標懸停在子菜單上，該子菜單不會停留，它將消失：/ – Obsivus 2012-04-24 06:48:40
CSSS過渡將是唯一的方法來做到這一點只有CSS。只需設置轉換延遲，然後在延遲時鐘完成之前不會發生CSS更改。唯一的問題是IE，它不支持CSS轉換。
https://developer.mozilla.org/en/CSS/transition-delay
除此之外，您將需要採取基於JavaScript的菜單，實現這些都可以在互聯網上找到。
您可以將超時時間從500 Ms更改爲任何您想要的值。 – 2012-04-25 00:28:27
感謝這是我想要的！ :) – Obsivus 2012-04-25 11:48:51