CSS下拉菜单：添加鼠标延迟 [英] CSS Dropdown Menu: Add delay on mouse out
问题描述
我使用CSS和HTML下拉菜单：
I have dropdown using CSS and HTML below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Main Menu</title>
<style>
.menu
{
float:left;
background:#CCC;
margin:0px;
padding:0px;
}
.menu li
{
position:relative;
float:left;
width:180px;
padding: 5px 0px;
list-style: none;
}
.menu li:hover
{
background:#999;
}
.menu ul
{
display:none;
position:absolute;
background:#CCC;
padding:0;
margin:5px 0 0 0;
}
.menu ul li ul
{
left:100%;
top:0;
margin:0px;
}
.menu li:hover ul ul, .menu li:hover ul ul ul
{
display: none;
}
.menu li:hover ul, .menu ul li:hover ul, .menu ul ul li:hover ul
{
display: block;
}
</style>
</head>
<body>
<ul class="menu">
<li>Home</li>
<li>
Categories
<ul>
<li>Lorem Ipsum</li>
<li>Dolor Sit Amet</li>
<li>Consectetuer</li>
<li>
Adipiscing
<ul>
<li>Child Elit Set Diam Nonummy</li>
<li>
Child Suspendisse sed
<ul>
<li>Grand Child Nulla dolor dui</li>
<li>Grand Child Venenatis feugiat</li>
<li>Grand Child Morbi ac lectus</li>
<li>Grand Child Nulla dolor dui</li>
<li>Grand Child Venenatis feugiat</li>
<li>Grand Child Morbi ac lectus</li>
</ul>
</li>
<li>Child Nulla dolor dui</li>
<li>Child Venenatis feugiat</li>
<li>Child Morbi ac lectus</li>
</ul>
</li>
<li>Elit Set Diam Nonummy</li>
<li>Suspendisse sed</li>
<li>
Nulla dolor dui
<ul>
<li>Child Elit Set Diam Nonummy</li>
<li>Child Suspendisse sed</li>
<li>Child Nulla dolor dui</li>
<li>Child Venenatis feugiat</li>
<li>Child Morbi ac lectus</li>
</ul>
</li>
<li>Venenatis feugiat</li>
<li>Morbi ac lectus</li>
<li>pharetra</li>
</ul>
</li>
<li>Order</li>
<li>Payment</li>
<li>Contact</li>
</ul>
</body>
</html>
JSBIN：
http://jsbin.com/anojif
我想在此下拉菜单中添加延迟，所以当鼠标移出时，孩子菜单仍然显示秒。我已经尝试一些教程，但它这样混淆。
I want to add delay in this dropdown, so when the mouse is moved out, child menu still appear for seconds. I have try some tutorial out there, but it so confuse.
我不想使用任何jquery下拉菜单。你能帮助我如何使这个发生使用javascript。
I dont want using any jquery dropdown menu for some reason. Can you help me how to make this happen using javascript.
已解决： http://jsbin.com/otapex/2
SOLVED: http://jsbin.com/otapex/2
推荐答案
更改所有：悬停到某个类别（例如.hover）。添加mouseover / mouseout事件以在setTimeout中添加hover类。 setTimeout应该检查用户是否仍然悬停在元素上。
Change all your :hover to a class (e.g. ".hover"). Add mouseover/mouseout events to add the "hover" class in a setTimeout. The setTimeout should check if the user is still hovering over the element.
这篇关于CSS下拉菜单：添加鼠标延迟的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
