jquery级联菜单
<scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<scripttype="text/javascript">
$(document).ready(function(){
$('.menuli').hover(function(){
$(this).children('ul').show();
$(this).focus().addClass('focusa')
},function(){
$(this).children('ul').hide();
$(this).focus().removeClass('focusa');
});
});
</script>
<styletype="text/css">
ul{list-style:none;margin:0;padding:0;}
.menu{height:30px;line-height:30px;}
.menuli{float:left;position:relative;}/*这一级是导航*/
.menulia{display:block;height:30px;line-height:30px;padding:020px;}
.menulia:hover{color:#000;background:url(img/bg1.png);}
.menulia.more{background:url(img/there.png)no-repeat130pxcenter;}
.menuliul{position:absolute;float:left;width:150px;border:1pxsolid#000;display:none;}/*这是第二级菜单*/
.menuliula{width:110px;}
.menuliula:hover{background:url(img/bg1.png);}
.menuliulul{top:0;left:150px;}/*从第三级菜单开始,所有的子级菜单都相对偏移*/
</style>
<ulclass="menu">
<li><ahref="#">菜单一</a>
<ulclass="one">
<li><ahref="#">菜单一</a></li>
<li><ahref="#">菜单二</a></li>
<li><ahref="#">菜单三</a></li>
<li><ahref="#">菜单四</a></li>
<li><ahref="#"class="more">菜单五</a>
<ulclass="two">
<li><ahref="#">菜单一</a></li>
<li><ahref="#">菜单二</a></li>
<li><ahref="#">菜单三</a></li>
<li><ahref="#">菜单四</a></li>
<li><ahref="#"class="more">菜单五</a>
<ulclass="three">
<li><ahref="#">菜单一</a></li>
<li><ahref="#">菜单二</a></li>
<li><ahref="#">菜单三</a></li>
<li><ahref="#">菜单四</a></li>
<li><ahref="#"class="more">菜单五</a>
<ulclass="four">
<li><ahref="#">菜单一</a></li>
<li><ahref="#">菜单二</a></li>
<li><ahref="#">菜单三</a></li>
<li><ahref="#">菜单四</a></li>
<li><ahref="#">菜单五</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><ahref="#">菜单二</a>
<ulclass="one">
<li><ahref="#">菜单一</a></li>
<li><ahref="#">菜单二</a></li>
<li><ahref="#"class="more">菜单三</a>
<ulclass="two">
<li><ahref="#">菜单一</a></li>
<li><ahref="#">菜单二</a></li>
<li><ahref="#"class="more">菜单三</a>
<ulclass="three">
<li><ahref="#">菜单一</a></li>
<li><ahref="#">菜单二</a></li>
<li><ahref="#">菜单三</a></li>
<li><ahref="#">菜单四</a></li>
<li><ahref="#">菜单五</a></li>
</ul>
</li>
<li><ahref="#">菜单四</a></li>
</ul>
</li>
</ul>
</li>
<li><ahref="#">菜单三</a></li>
<li><ahref="#">菜单四</a></li>
<li><ahref="#">菜单五</a>
<ulclass="one">
<li><ahref="#">菜单一</a></li>
<li><ahref="#">菜单二</a></li>
<li><ahref="#">菜单三</a></li>
</ul>
</li>
</ul>