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 )。添加鼠标悬停/ 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屋!