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.
I dont want using any jquery dropdown menu for some reason. Can you help me how to make this happen using javascript.
SOLVED: http://jsbin.com/otapex/2
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.