導航下拉麪板上的延遲懸停效果

我不能爲我的生活弄清楚如何推遲懸停。如果您結帳 http://forum.smartcanucks.ca當懸停面板顯示時，頂部有一個菜單。導航下拉麪板上的延遲懸停效果

的CSS，使他們露面是

#navigation li:hover > .panel { 
    display: block; 
}

我找了一個jQuery替代使它這樣，當你將鼠標懸停在#navigation裏有顯示前一個0.5秒的延遲：塊;應用於.panel，然後當您離開li元素或.panel的懸停時，在.panel返回到display：none之前有一個.3秒延遲。

我已經嘗試過CSS選項，並且無法讓它們工作，我也試圖實現不同的我在互聯網上找到的jQuery片段無濟於事。

推遲的原因是人們不小心將鼠標移動到li元素上，而不需要的.panel顯示很煩人。

我很感激任何幫助。

這裏是一個CSS選擇我試圖執行，不能得到它的工作： http://jsfiddle.net/gryzzly/JWk7V/4/（這是一個例子 - 不是我）我寧願喜歡一個jQuery解決方案是跨瀏覽器。

編輯

好吧，我試圖讓.panel盒使用jQuery，而不是CSS

我想這

<script type="text/javascript" charset="utf-8"> 
$(document).ready(function() { 
    $("#navigation li").hover(function() { 
     $('#navigation li:hover > .panel').addClass("displayblock");  
    },  
    function() {  
     $('.panel').removeClass("displayblock");  
    }); 
}); 
</script>

，並在這裏顯示的是類.displayblock {display：block;}

當使用螢火蟲時，displayblock類被添加到面板元素，但面板不顯示。不知道我做錯了什麼。

我想使用HoverIntent，但在嘗試之前我只想使面板僅顯示jQuery。

來源

2012-04-04 Amber Stillwell