我想用jQuery设计一个多级菜单。 我已经写了一些代码。你可以看到演示here。 所有这一切正常。但我想动态地制作多级下拉菜单。使用jquery的多级下拉菜单
脚本
$('ul#menu > li').hover(function(){
//$('#drop' , this).css('display','block');
$('.drop' , this).delay(20).slideDown(200);
}, function(){
$('.drop' , this).delay(20).slideUp(200);
});
HTML
<ul id="menu">
<li><a href="#">Home</a>
<ul class="drop">
<li><a href="#">About us</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">About us</a></li>
</ul>
</li>
<li><a href="#">about</a>
<ul class="drop">
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
</ul>
</li>
</ul>
CSS
ul#menu
{
margin:0;
padding:0;
}
ul#menu > li
{
list-style:none;
float:left;
margin:0;
padding:0;
position:relative;
}
ul#menu a
{
text-decoration:none;
color:#fff;
background:red;
display:block;
padding:10px;
}
ul#menu > li ul.drop
{
margin:0;
padding:0;
width:150px;
position:absolute;
display:none;
}
ul#menu > li ul.drop ul
{
margin:0;
padding:0;
width:150px;
position:absolute;
display:none;
left:150px;
top:0;
}
ul#menu > li ul li
{
margin:0;
padding:0;
list-style:none;
position:relative;
}
感谢,对上述解决方案。但是您的解决方案仅适用于2级菜单项。即父母和孩子。你能说我怎么能有无限级菜单? – Vishal