管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

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>

　　<ul>

　　</ul>

　　</li>

　　</ul>

　　</li>

　　</ul>

　　</li>

　　</ul>

　　</li>

　　</ul>

　　</li>

　　<li>

　　</li>

　　<li>

　　<ul>

　　</li>

　　</ul>

　　</li>

　　</ul>

　　</li>

　　</ul>

　　</li>

　　</ul>

　　</li>

　　</ul>

　　</li>

　　</ul>

　　</li>

　　<li>

　　</li>

　　</ul>

教程首页更多教程