Response title
This is preview!
function menu(){
$(" #nav li").hover(function(){
$(this).find('ul:first').css({visibility: "visible",display: "none"}).slideDown('fast').show();
},function(){
$(this).find('ul:first').css({visibility: "visible", display: "none"}).slideUp('slow');
});
}
$(document).ready(function(){
menu();
});
#nav {
list-style: none;
margin: 0;
padding-left: 8px;
overflow:visible;
}
#nav ul {
margin: 0;
padding: 0;
}
#nav li {
margin: 0;
height: 25px;
padding: 0;
}
#nav li a {
display: block;
line-height: 44px;
margin: 0;
padding: 0 20px 0 15px;
font-size: 13px;
font-family:Verdana, Geneva, sans-serif;
color: #000000;
letter-spacing: -1px;
}
#nav li ul a {
display: block;
line-height: 44px;
margin: 0;
padding: 0 20px 0 15px;
font-size: 10px;
font-family:Verdana, Geneva, sans-serif;
color: #000000;
letter-spacing: -1px;
}
#nav li ul {
position: absolute;
width: 150px;
background-color:transparent;
top: 42px;
left: -999em;
padding-top:8px;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}
#nav li li {
padding: 0;
width: 150px;
}
#nav li li a {
height: 25px;
line-height: 25px;
color: #00F;
background-color:#CCC;
margin: 0;
}
#nav li li a:hover {
border-top: 1px solid #131f27;
background-color: #FFF;
}
#nav li:hover, #nav li.sfhover {
position: static;
}
.lavaLamp {
position: relative;
height: 60px;
padding: 0px 0px 0px 6px;
overflow: hidden;
}
.lavaLamp li {
float: left;
padding-left:10px;
list-style: none;
padding-right: 10px;
}
#nav li.back {
background:url(images/Right.gif) no-repeat top right;
height: 50px;
width:21px;
z-index: -1;
position: absolute;
padding-right: 0px;
}
#nav li.back .left {
background:url(images/Left.gif) no-repeat top left;
height: 50px;
margin-right: 21px;
z-index: -1;
}
.lavaLampWithImage li a {
z-index: 10;
}
#nav ul ul{
top:auto;
}
#nav li ul ul {
margin:-34px 0 0 151px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
display:none;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
display:block;
}
<ul id="nav" class="lavaLamp">
<li><a href="#">Home</a></li>
<li><a href="#">Products</a>
<ul>
<li><a href="#">Type1</a>
<ul>
<li><a href="#">Type1.1</a></li>
<li><a href="#">Type1.2</a></li>
</ul>
</li>
<li><a href="#">Type2</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
© 2013 jQuery Foundation
Sponsored by and others.