导航下拉面板上的延迟悬停效果

我不能为我的生活弄清楚如何推迟悬停。如果您结帐 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