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>

<li><a href="">菜单三</a></li>

<li><a href="">菜单三</a>

<ul>

<li><a href="">菜单三</a></li>

<li><a href="">菜单三</a></li>

<li><a href="">菜单三</a>

<ul>

<li><a href="">菜单三</a></li>

<li><a href="">菜单三</a></li>

<li><a href="">菜单三</a>

<ul>

<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>

<li><a href="">菜单三</a></li>

<li><a href="">菜单三</a>

<ul>

<li><a href="">菜单三</a></li>

<li><a href="">菜单三</a></li>

<li><a href="">菜单三</a>

<ul>

<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>

<li><a href="">菜单三</a></li>

<li><a href="">菜单三</a>

<ul>

<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 多级下拉菜单核心代码】相关文章：

★ 免费空间广告万能消除代码

★ 下拉菜单

★ jQuery使用zTree插件实现树形菜单和异步加载

★ jQuery+ajax实现无刷新级联菜单示例

★ 下拉菜单既可以选择,又可以自己填写

★ jquery中添加属性和删除属性

★ jquery表单对象属性过滤选择器用法

★ jQuery实现返回顶部功能

★ 仿DVBBS下拉菜单效果 jb51修正无错

★ JS/Jquery判断对象为空的方法