我在下面使用 CSS 和 HTML 制作了下拉菜单:
<!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
我想在此下拉菜单中添加延迟，因此当鼠标移出时，子菜单仍会出现几秒钟。我在那里尝试了一些教程，但它太困惑了。
出于某种原因，我不想使用任何 jquery 下拉菜单。你能帮助我如何使用 javascript 实现这一点吗？
最佳答案
将所有 :hover 更改为一个类(例如“.hover”)。添加 mouseover/mouseout 事件以在 setTimeout 中添加“悬停”类。 setTimeout 应该检查用户是否仍在元素上悬停。
关于javascript - CSS 下拉菜单 : Add delay on mouse out，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8422123/