Menu
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
695
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.
182
I think what you're looking for is hoverIntent
http://cherne.net/brian/resources/jquery.hoverIntent.html
This accomplishes what you want to do. If you are new to javascript, it will take some playing around with, but it isn't not that hard.
26
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
