这是使用jQuery编辑的二级导航栏，效果是这样的。
而事实上，关于样式部分完全可以自由布局和修改，只要结构正确就行。
1.下面是html部分
<ul id="nav"> ???????<li><a href="#">一级导航1</a></li> ???????<li><a href="#">一级导航2</a> ???????????<ul> ???????????????<li><a href="#">二级导航1</a> ???????????????????<ul> ???????????????????????<li><a href="#">三级导航1</a></li> ???????????????????????<li><a href="#">三级导航2</a></li> ???????????????????</ul> ???????????????</li> ???????????????<li><a href="#">二级导航2</a></li> ???????????????<li><a href="#">二级导航3</a></li> ???????????</ul> ???????</li> ???????<li><a href="#">一级导航3</a> ???????????<ul> ???????????????<li><a href="#">二级导航1</a> ???????????????????<ul> ???????????????????????<li><a href="#">三级导航1</a></li> ???????????????????????<li><a href="#">三级导航2</a></li> ???????????????????</ul> ???????????????</li> ???????????????<li><a href="#">二级导航2</a></li> ???????????????<li><a href="#">二级导航3</a></li> ???????????</ul> ???????</li> ???</ul>
关于这部分，也是单纯的ul>li>ul>li...的嵌套
想要几个就加几个li，至于是在第一个li里追加ul还是在第二个li里追加，同样视情况而定就好。
总之第一层
<ul id="nav"> ???????<li><a href="#">一级导航1</a></li> ???????<li><a href="#">一级导航2</a> ???????????。。。 ???????</li> ???????<li><a href="#">一级导航3</a> ???????????。。。 ???????</li> ???</ul>
第二层
<ul id="nav"> ???????<li><a href="#">一级导航1</a></li> ???????<li><a href="#">一级导航2</a> ???????????<ul> ???????????????<li><a href="#">二级导航1</a> ???????????????????。。。 ???????????????</li> ???????????????<li><a href="#">二级导航2</a></li> ???????????????<li><a href="#">二级导航3</a></li> ???????????</ul> ???????</li> ???????<li><a href="#">一级导航3</a> ???????????<ul> ???????????????<li><a href="#">二级导航1</a> ???????????????????。。。 ???????????????</li> ???????????????<li><a href="#">二级导航2</a></li> ???????????????<li><a href="#">二级导航3</a></li> ???????????</ul> ???????</li> ???</ul>
第三层
<ul id="nav"> ???????<li><a href="#">一级导航1</a></li> ???????<li><a href="#">一级导航2</a> ???????????<ul> ???????????????<li><a href="#">二级导航1</a> ???????????????????<ul> ???????????????????????<li><a href="#">三级导航1</a></li> ???????????????????????<li><a href="#">三级导航2</a></li> ???????????????????</ul> ???????????????</li> ???????????????<li><a href="#">二级导航2</a></li> ???????????????<li><a href="#">二级导航3</a></li> ???????????</ul> ???????</li> ???????<li><a href="#">一级导航3</a> ???????????<ul> ???????????????<li><a href="#">二级导航1</a> ???????????????????<ul> ???????????????????????<li><a href="#">三级导航1</a></li> ???????????????????????<li><a href="#">三级导航2</a></li> ???????????????????</ul> ???????????????</li> ???????????????<li><a href="#">二级导航2</a></li> ???????????????<li><a href="#">二级导航3</a></li> ???????????</ul> ???????</li> ???</ul>
多少自己定，嗯！
2.css部分
这个我惭愧的说，你们还是自己按效果图去做吧！自己实在是可悲啊！居然想不出个样式来。
???????*{ ???????????margin: 0; ???????????padding: 0; ???????} ???????body { ???????????font-size: 0.85em; ???????????font-family: Verdana, Array, Helvetica, sans-serif; ???????} ???????#nav, #nav ul { ???????????margin: 0; ???????????padding: 0; ???????????list-style-type: none; ???????????list-style-position: outside; ???????????position: relative; ???????????line-height: 1.5em; ???????} ???????#nav a { ???????????display: block; ???????????padding: 0 5px; ???????????border: 1px solid #333; ???????????color: #fff; ???????????text-decoration: none; ???????????background: #f60; ???????} ???????#nav a:hover { ???????????background: #fff; ???????????color: #333; ???????} ???????#nav li { ???????????float: left; ???????????position: relative; ???????} ???????#nav ul { ???????????position: absolute; ???????????display: none; ???????????width: 12em; ???????????top: 1.5em; ???????} ???????#nav li ul a { ???????????width: 12em; ???????????display: block; ???????????height: auto; ???????????float: left; ???????} ???????#nav ul ul { ???????????top: auto; ???????????position: absolute; ???????????display: none; ???????????left: 12em; ???????????margin-bottom: 10px; ???????????z-index: 22; ???????}3.jquery部分
导入jquery后就编辑以下js脚本。
function main(){ ???????$("#nav ul").css({display: "none"}); ???????$("#nav li").hover(function(){ ???????????$(this).find(‘ul:first‘).css({visibility:"visible"}).show(400); ???????},function(){ ???????????$(this).find(‘ul:first‘).css({visibility:"hidden"}); ???????}); ???}$(function(){ ???????main(); ???})大致的意思是：
1）先声明个函数
2）先将第二个第三个的ul给隐藏！通过css样式，利用jQuery里的$(selecter).css("名":"值");
//事实上，这部是针对游览器兼容的
3）然后使用鼠标悬浮和移开的函数进行编辑。
$(selecter).hover(【鼠标悬浮自定义函数】,【鼠标移开自定义函数】);
而里面则是
【鼠标悬浮自定义函数】查找选中的li下的第一个ul，然后将其显示，并以400秒的速度
【鼠标移开自定义函数】查找选中的li下的第一个ul，然后将其隐藏。
jquery三级导航，级联菜单精简
原文地址：https://www.cnblogs.com/yinwangyizhi/p/9391011.html