1,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>
2,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;}
3.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; 
});