jquery 多级下拉菜单核心代码

jquery 复制代码代码如下: $(document).ready(function(){ $("ul li").hover(function(){ $(this).find("ul:first").show();//鼠标滑过查找li下面的第一个ul然后显示； },function(){ $(this).find("ul:first").hide();//鼠标离开隐藏li下面d的ul； }) $("ul li ul li ul").prev().addClass("bbb");//给li下面ul是aaa的样式的前一个同辈元素添加css； }) css 复制代码代码如下: ul, li{padding:0;margin:0;} ul li{float:left;;margin-right:1px;display:inline;list-style:none;text-align:center;} ul li ul li{float:none;background:#ccc;margin-bottom:1px;display:block;_display:inline;position:relative;} ul li ul{display:none;} ul a{text-decoration:none;width:80px;height:20px;line-height:20px;display:block;background:#bbb;font-size:12px} ul li a:hover{background:#eee;color:#000} ul li ul li .aaa{position:absolute;left:80px;top:0;border-left:1px solid #fff} ul li ul li .aaa li{float:none;} body .bbb{background:#f00;color:#fff} html 复制代码代码如下: <ul> <li> <a href="">栏目一</a> <ul> <li><a href="">菜单一</a></li> <li><a href="">菜单一</a></li> <li><a href="">菜单一</a></li> <li><a href="">菜单一</a> <ul class="aaa"> <li><a href="">菜单三</a></li> <li><a href="">菜单三</a> <ul class="aaa"> <li><a href="">菜单三</a></li> <li><a href="">菜单三</a></li> <li><a href="">菜单三</a> <ul class="aaa"> <li><a href="">菜单三</a></li> <li><a href="">菜单三</a></li> <li><a href="">菜单三</a> <ul class="aaa"> <li><a href="">菜单三</a></li> <li><a href="">菜单三</a></li> <li><a href="">菜单三</a></li> <li><a href="">菜单三</a></li> </ul> </li> <li><a href="">菜单三</a></li> </ul> </li> <li><a href="">菜单三</a></li> </ul> </li> <li><a href="">菜单三</a></li> <li><a href="">菜单三</a></li> </ul> </li> </ul> </li> <li> <a href="">栏目二</a> </li> <li> <a href="">栏目三</a> <ul> <li><a href="">菜单三</a> </li> <li><a href="">菜单三</a> <ul class="aaa"> <li><a href="">菜单三</a></li> <li><a href="">菜单三</a> <ul class="aaa"> <li><a href="">菜单三</a></li> <li><a href="">菜单三</a></li> <li><a href="">菜单三</a> <ul class="aaa"> <li><a href="">菜单三</a></li> <li><a href="">菜单三</a></li> <li><a href="">菜单三</a></li> <li><a href="">菜单三</a></li> </ul> </li> <li><a href="">菜单三</a> <ul class="aaa"> <li><a href="">菜单三</a></li> <li><a href="">菜单三</a> <ul class="aaa"> <li><a href="">菜单三</a></li> <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> </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> <li> <a href="">栏目四</a> </li> </ul>

　　推荐阅读

　　基于jquery的direction图片渐变动画效果

还有一点就是包括滤镜的使用但是有一点必须要说明的是滤镜在firefox下不能识别看不到效果，下面就开始我们的代码编写吧 html是比较简单的代码复制代码代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 >>>详细阅读

本文标题：jquery 多级下拉菜单核心代码

地址：http://www.17bianji.com/kaifa2/JS/26353.html

1/2 1