zblogphp二级导航设置方法详解

讲解一：

<li id="nvabar-item-index"><a href="http://www.xxx.cn/">首页</a></li>  <!--首页示例代码-->
<li id="nvabar-item-index"><a href="你网站的首页链接">首页（名称，这个不用说了吧）</a></li> <!--首页代码说明-->
<li id="nvabar-item-index"><a href="你网站的首页链接" target="_blank">首页（名称，这个不用说了吧）</a></li> <!--链接在新窗口打开-->
<li id="nvabar-item-index"><a href="你网站的首页链接" target="_blank"><i class="fa fa-home"></i>首页（字体图标添加在文字前边）</a></li> <!--导航栏添加字体图标-->

ps：以上是首页的代码详解：

li标签里的id用处为部分主题用它判断当前页面进行导航高亮；

target="_blank"用来在新窗口打开链接，以下不在叙述；

<i class="fa fa-home"></i>导航添加字体图标，以下不在叙述；

分类导航链接：

<li id="navbar-category-3"><a href="http://www.fengyan.cc/website/">建站教程</a></li>  <!--分类示例代码-->
<li id="navbar-category-当前分类ID"><a href="当前分类链接">建站教程</a></li>  <!--分类代码说明-->

单页面导航链接：

<li id="navbar-page-1262"><a href="http://www.fengyan.cc/guestbook">留言本</a></li>  <!--单页面示例代码-->
<li id="navbar-page-当前页面ID"><a href="当前页面链接">留言本</a></li>  <!--单页面代码说明-->

二级导航代码示例：

<li id="navbar-category-17">
    <a href="http://www.fengyan.cc/z-blog/">Z-Blog建站<span class="caret"></span></a>
    <ul>
	<li id="navbar-category-9"><a href="http://www.fengyan.cc/zblog-course/">Z-Blog教程</a></li>
        <li id="navbar-category-9"><a href="http://www.fengyan.cc/plug/">Z-Blog插件</a></li>
        <li id="navbar-category-10"><a href="http://www.fengyan.cc/free-theme/">Z-Blog免费模板</a></li>
        <li id="navbar-category-8"><a href="http://www.fengyan.cc/premium-theme/">Z-Blog收费模板</a></li>
    </ul>
</li>

这里我就贴下烽烟博客的二级导航代码，不做详细的说明了，因为很多的主题没有二级导航，或者设置方式有一定要求，例如ul标签要添加id或者class，具体请以当前主题的说明为准；

注意：一定要将‘禁止系统更新模块内容: ’按钮点成ON，不然设置的二级菜单代码会消失而导致不起作用。

讲解二：

css代码部分：

#nav{font-size:14px;font-weight:700;background-color: #333333;width: 970px;margin-top: 0px;margin-right: auto;margin-bottom: 0px;margin-left: auto;border-radius: 4px;padding-right: 5px;padding-left: 5px;position:relative; z-index:1}
#nav ul{height: 40px;line-height: 40px;overflow: hidden;}
#nav ul li{float:left;border-right-width: 1px;border-right-style: solid;border-right-color: #222;width: 100px;}
#nav ul li a{display:block;text-align:center;color:#FFF;line-height: 40px;}
#nav ul li a:hover,#nav ul li a.on{color:#fff;background-color:#d31f07;}
#nav li ul{line-height: 35px;list-style-type: none;left: -999em;position: absolute;width: 100px;padding-top: 0px;overflow: visible;}
#nav li ul li{float: left;border-top-width: 0px;border-right-width: 0px;border-bottom-width: 1px;border-left-width: 0px;background-color: #333333;border-bottom-style: solid;border-bottom-color: #111111;}
#nav li ul li a{display: block;text-align:center;width: 100px;padding: 0px;background-image: none;line-height: 40px;height: 40px;font-weight: normal;}
#nav li ul a:hover{color:#ffffff;text-decoration:none;font-weight:normal;background-color: #d31f07;}
#nav li:hover ul{left: auto;}
#nav li.sfhover ul{left: auto;}

html代码部分：

<div  id="nav"><ul><li><a href="{$host}">首页</a></li>{module:navbar}</ul></div>

然后去网站后台--模块管理--导航栏自行设置下拉导航，{module:navbar}部分内容由下面代码替换。

<li>
    <a href="#">一级导航</a>
    <ul>
        <li><a href="#">二级导航1</a></li>
        <li><a href="#">二级导航2</a></li>
    </ul>
<li>