我正在制作一些带有jQuery效果的下拉菜单,现在我需要创建一个子菜单(在dropdownmenu中)。
HTML:
<ul id="nav">
<li><a href="#">Homepage</a>
<ul>
<li><a href="#">Sumbenu</a></li> // i want to add one more submenu, in this submenu
<li><a href="#">Submenu</a></li>
<li><a href="#">submenu</a></li>
<li><a href="#">submenu</a></li>
</ul>
</ul>
的jQuery
$(document).ready(function(){
$('li').hover(function(){
$(this).find('ul>li').stop().slideToggle(400);
});
});
答案 0 :(得分:5)
一个非常简单的例子:
HTML:
<ul id="nav">
<li><a href="#">Homepage</a>
<ul>
<li><a href="#">Submenu</a>
<ul>
<li><a href="#">Sub-Submenu</a></li>
<li><a href="#">Sub-Submenu</a></li>
<li><a href="#">Sub-Submenu</a></li>
</ul>
</li>
<li><a href="#">Submenu</a></li>
<li><a href="#">submenu</a>
<ul>
<li><a href="#">Sub-Submenu</a></li>
<li><a href="#">Sub-Submenu</a></li>
<li><a href="#">Sub-Submenu</a></li>
</ul>
</li>
<li><a href="#">submenu</a></li>
</ul>
</li>
</ul>
CSS:
ul{
width: 100px;
position: absolute;
left: 100px;
top: 0;
}
#nav{
left: 0;
}
li ul{
display: none;
}
jQuery的:
$('li').hover(function(){
$(this).children('ul').stop().slideToggle(400);
});