站点介绍
相关多级导航文章：
有的时候需要设置多级导航，但是系统并不支持，在index.php中{module:navbar}，表示显示所有子分类；
所以就需改动一些地方使其支持多级分类；以系统自带模板WhitePage为例；
第一步：首先在后台的导航栏设置三级嵌套
<div id="divNavBar"><ul> <li>一级</li> <li>二级 <ul> <li>二级</li> <li>二级 <ul> <li>三级</li> <li>三级</li> </ul> </li> </ul> </li></ul></div>
第二步：这时你会发现然并卵开始第二步
在style文件下的css文件加上代码
#divNavBar ul li {float:left; margin:0 10px; font-size:1.25em; line-height:40px; position:relative; transition:all 0.4s ease 0s;}
一级导航，float：left意思是横向排列，position：relative；意思是设置定位点
#divNavBar ul li ul {position:absolute; left:-1px; top:40px; background:#fff; border:1px solid #eee; border-radius:0 0 3px 3px; width:100%; padding:5px 0; display:none; z-index:2;}
二级导航 position:absolute;意思是相对于relative来定位，display：none；默认不显示
#divNavBar ul li ul li {font-size:0.75em; margin:0; float:none;text-align:center; line-height:2em;}
二级导航float：none意思是竖排
#divNavBar ul li ul li ul{position:absolute;z-index: 4;left:100%;top:-5px}
三级导航 position：absolute；同上
其中top：；left；可以自己调节位置
第三步：到了这个时候你会发现怎么点导航都出不来；因为之前设置了display：none；
在模板代码之后加入JS：
$(document).ready(function(){ $('ul li').hover(function(){ $(this).children('ul').show(); },function(){ $(this).find('ul').hide(); });})好了，大功告成
此案例的完整代码（使用中酌情修改）：
<!doctype html><html><head><meta charset="utf-8"><title>z-blogPHP实现子分类下拉、多级导航</title><script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script></head><style>#divNavBar ul, #divNavBar li { list-style: none;}#divNavBar ul li { float: left; margin: 0 10px; font-size: 1.25em; line-height: 40px; position: relative; transition: all 0.4s ease 0s;}#divNavBar ul li ul { position: absolute; left: -1px; top: 40px; background: #fff; border: 1px solid #eee; border-radius: 0 0 3px 3px; width: 100%; padding: 5px 0; display: none; z-index: 2;}#divNavBar ul li ul li { font-size: 0.75em; margin: 0; float: none; text-align: center; line-height: 2em;}#divNavBar ul li ul li ul { position: absolute; z-index: 4; left: 100%; top: -5px}</style><body><div id="divNavBar"> <ul> <li>一级</li> <li>一级 <ul> <li>二级</li> <li>二级 <ul> <li>三级</li> <li>三级</li> </ul> </li> </ul> </li> </ul></div><script>$(document).ready(function(){ $('ul li').hover(function(){ $(this).children('ul').show(); },function(){ $(this).find('ul').hide(); });}); </script></body></html>转自：zblog论坛：青鱼
相似站点