[color=red][size=large]呵呵,先发1个以前工作中自己写的一个东东:[/[/size]color]
[size=large]HTML: <ul id="daohang">
<li>
<a href="${base}/">首页</a>
<ul>
<li>
<a href="#">下拉一</a>
<ul class="aaa">
<li>
<a href="#">下拉二</a>
<ul class="aaa">
<li><a href="#">下拉二</a></li>
<li><a href="#">下拉二</a></li>
<li><a href="#">下拉二</a></li>
</ul>
</li>
<li><a href="#">下拉二</a></li>
<li><a href="#">下拉二</a></li>
</ul>
</li>
<li><a href="#">下拉二</a></li>
<li><a href="#">下拉三</a></li>
</ul>
</li>
</ul>
css:
#daohang li ul li{position:relative;}
#daohang li ul{display:none;}
#daohang li ul li .aaa{position:absolute;left:80px;top:0;border-left:1px solid #fff}
#daohang li ul li .aaa li{float:none;}
js(基于jquery):
$(document).ready(function(){
$("#daohang li").hover(function(){
$(this).find("ul:first").slideDown(200);//鼠标滑过查找li下面的第一个ul然后显示;
},function(){
$(this).find("ul:first").slideUp(200);//鼠标离开隐藏li下面d的ul;
});[/size]
[size=large]HTML: <ul id="daohang">
<li>
<a href="${base}/">首页</a>
<ul>
<li>
<a href="#">下拉一</a>
<ul class="aaa">
<li>
<a href="#">下拉二</a>
<ul class="aaa">
<li><a href="#">下拉二</a></li>
<li><a href="#">下拉二</a></li>
<li><a href="#">下拉二</a></li>
</ul>
</li>
<li><a href="#">下拉二</a></li>
<li><a href="#">下拉二</a></li>
</ul>
</li>
<li><a href="#">下拉二</a></li>
<li><a href="#">下拉三</a></li>
</ul>
</li>
</ul>
css:
#daohang li ul li{position:relative;}
#daohang li ul{display:none;}
#daohang li ul li .aaa{position:absolute;left:80px;top:0;border-left:1px solid #fff}
#daohang li ul li .aaa li{float:none;}
js(基于jquery):
$(document).ready(function(){
$("#daohang li").hover(function(){
$(this).find("ul:first").slideDown(200);//鼠标滑过查找li下面的第一个ul然后显示;
},function(){
$(this).find("ul:first").slideUp(200);//鼠标离开隐藏li下面d的ul;
});[/size]