我有一个使用 jQuery 鼠标悬停延迟的 CSS 下拉菜单，以防止菜单显示用户是否只是将鼠标移动到页面上的另一个链接。
我的问题是 css hover 正在触发，这会在鼠标悬停时改变活动 li 的样式。
有没有办法阻止 CSS 悬停样式触发，除非达到 jQuery 例程中定义的悬停时间？（用户故意使用菜单）
我尝试使用 CSS 动画：和动画延迟：但无法使其正常工作，这就是我使用 jQuery 例程的原因。
代码示例在这里：http: //jsfiddle.net/2fc3W/7/
我的 CSS：
.pipe {
margin-top:4px;
}
.li_hover {
color: #002398;
}
.bottom_li {
margin-bottom:6px;
margin-top:2px;
}
ul#nav li .bottom_li:hover > a {
background:#E0E0E0;
}
ul#nav, ul#nav ul {
width:300px;
list-style:none;
margin:0;
padding:0;
position:absolute;
z-index:9;
border:1px solid #297BCE;
}
ul#nav li li:hover > a {
border:none;
}
ul#nav li {
position:relative;
float:left;
zoom:1;
/*Needed for IE*/
}
ul#nav li:hover > a {
background:#E0E0E0;
color:#297BCE;
border-left:1px solid #297BCE;
border-right:1px solid #297BCE;
border-top:1px solid #E0E0E0;
border-bottom:1px solid #E0E0E0;
text-decoration:underline;
}
#nav li.is-active > ul {
display: block;
}
ul#nav li a {
border:1px solid #FFFFFF;
display:block;
padding:4px 6px 4px 6px;
color:#297BCE;
font-weight:bold;
font-family:Arial, Times New Roman, Tahoma;
font-size:13px;
text-decoration:none;
}
ul#nav ul {
padding-left:8px;
padding-top:2px;
display:none;
position:absolute;
width:150px;
border:1px solid #297BCE;
background:#E0E0E0;
left:0;
border-top:none;
}
ul#nav ul li {
background:#E0E0E0;
color:#000;
border:none;
float:none;
}
ul#nav ul li a {
border:none;
width:100%;
padding:0;
display:block;
color:#000000;
line-height:145%;
font-size:12px;
font-weight:normal;
}
ul#nav ul li a:hover {
border:none;
width:150px;
color:#297BCE;
}
ul#nav ul ul {
position: absolute;
top: 0;
left: 100%;
margin-left:-3px;
display: none;
}
ul#nav ul ul {
padding-left:8px;
position:absolute;
width:150px;
border:1px solid #297BCE;
background:#E0E0E0;
}
ul#nav ul li:hover ul {
display: block;
}
ul#nav ul.snug{
width: auto;
}
ul#nav ul.snug li a{
display: inline;
padding-right: 6px;
width: auto;
}
我的Javascript：
var hoverTimer = function ( menu ) {
return setTimeout(function() {
$(menu).addClass('is-active');
}, 500);
},
hover = null,
$nav = $( '#nav > li' );
$nav.mouseenter(function() {
hover = hoverTimer(this);
});
$nav.mouseleave(function() {
clearTimeout(hover);
$nav.removeClass( 'is-active' );
});
我的 HTML：
<div id="menubar">
<ul id="nav">
<li><a href="/ueber_uns.htm">About Us</a>
<ul>
<li><a href="#">Who We Are</a></li>
<li><a href="#">Our Goals</a></li>
<li><a href="#">Our Team</a></li>
<li><a href="#">Press</a>
<ul>
<li><a href="#">2006</a></li>
<li><a href="#">2007</a></li>
<li><a href="#">2008</a></li>
</ul>
</li>
<li><a href="#">Impressum</a></li>
<li class="bottom_li"><a href="#"><span class="li_hover">See all</span></a></li>
</ul>
</li>
<li class="pipe">|</li>
<li><a href="/ueber_uns.htm">About Us</a>
<ul>
<li><a href="#">Who We Are</a></li>
<li><a href="#">Our Goals</a></li>
<li><a href="#">Our Team</a></li>
<li><a href="#">Press</a>
<ul>
<li><a href="#">2006</a></li>
<li><a href="#">2007</a></li>
<li><a href="#">2008</a></li>
</ul>
</li>
<li><a href="#">Impressum</a></li>
<li class="bottom_li"><a href="#"><span class="li_hover">See all</span></a></li>
</ul>
</li>
<li class="pipe">|</li>
<li><a href="/ueber_uns.htm">About Us</a>
<ul>
<li><a href="#">Who We Are</a></li>
<li><a href="#">Our Goals</a></li>
<li><a href="#">Our Team</a></li>
<li><a href="#">Press</a>
<ul>
<li><a href="#">2006</a></li>
<li><a href="#">2007</a></li>
<li><a href="#">2008</a></li>
</ul>
</li>
<li><a href="#">Impressum</a></li>
<li class="bottom_li"><a href="#"><span class="li_hover">See all</span></a></li>
</ul>
</li>
</ul>
</div>
感谢您提供指导我正确方向的任何建议。