Z-blog导航栏修改为下拉式导航栏的一种方法
注：本文以林肆的最新asp版模板simline为例
由于本站的分类比较多，都排在以前的导航栏上有点拥挤，而且多的情况下会出现错位的情况，所以想寻找有没有修改的办法，所以我开始在网站寻找方法，重要在z-blog论坛上http://bbs.rainbowsoft.org/thread-80894-1-1.html找到个方法。首先谢谢他，给我了灵感和方法，但和他有点不同，我只是改了下css和导航栏模块代码，对于模板并没有修改，由于自己也是个新手，所以到处尝试，弄了半天时间。终于弄成现在的效果，希望对大家有所帮助。
（1）之前的没有下拉效果：
（2）修改成功后的效果：
过程：
1.修改对应模板下的css文件。
找到css文件的导航栏的下面的代码如下：(所有的#nav全部换成下面的代码)
#nav{
background:#777;height:28px;width:940px;line-height:35px;
font-weight:normal;margin:0 auto;}
#nav ul{height:28px;width:720px;float:left;}
#nav li{
float:left; line-height:28px;position:relative;
line-height:30px\9;}
#nav a{padding:0px 25px; display:block;color:#f8f8f8;font-weight:normal;}
#nav a:hover{height:28px\9;background:#555;text-decoration:none;}
替换代码是：：
#nav{ background:#777;height:28px;width:974px; font-weight:normal;margin:0 auto;} /*设置导航条长度（从左边到搜索框的距离width）*/ #nav ul{height:28px;width:760px;float:left;} #nav a{padding:0px 0px; display:block;color:#f8f8f8;font-weight:normal;} #nav a:hover{background:#555;text-decoration:none;} /*子导航竖排*/ #nav li {position: relative;height: 100%;color:#fff;width:102px; text-align:center; font:'Microsoft Yahei'; float: left; line-height:28px;} #nav ul ul {visibility:hidden;padding:0px 0px;width: auto;white-space:nowrap; font: 14px 'Microsoft Yahei',Verdana, Arial, Helvetica, sans-serif;} #nav ul li:hover ul, #nav ul a:hover ul{visibility:visible; margin:auto;} #nav ul ul li a{width:102px;margin:0;padding:0px 0px;color:#f8f8f8; font-weight:normal;line-height:28px;background:#777777;}
保存退出MD软件。【上面的代码可以自己根据自己的模板自行修改参数】
2.修改导航栏模块代码：[例子]
比如我的以前的模板代码如下：
<li id="menu-1"><a href="http://www.tusay.net/">首页</a></li> <li id="menu-cate-15"><a href="http://www.tusay.net/catalog.asp?cate=15">XP</a></li> <li id="menu-cate-16"><a href="http://www.tusay.net/catalog.asp?cate=16">Win 7</a></li> <li id="menu-cate-17"><a href="http://www.tusay.net/catalog.asp?cate=17">多系统</a></li> <li id="menu-cate-18"><a href="http://www.tusay.net/catalog.asp?cate=18">网络连接</a></li> <li id="menu-cate-19"><a href="http://www.tusay.net/catalog.asp?cate=19">故障处理</a></li> <li id="menu-cate-20"><a href="http://www.tusay.net/catalog.asp?cate=20">其他</a></li> <li id="menu-page-18"><a href="http://www.tusay.net/link.html">链接</a></li> <li id="menu-page-19"><a href="http://www.tusay.net/guestbook.html">留言</a></li> <li id="menu-cate-21"><a href="http://www.tusay.net/catalog.asp?cate=21">系统网络</a></li>
现在你要把xp，win7，win7-xp，系统网络四个栏作为子栏目，那么就只需要更改代码添加<ul></ul>即可。如下面的代码红色部分。
<li id="menu-1"><a href="http://www.tusay.net/">首页</a></li> <li id="menu-cate-21"><a href="http://www.tusay.net/catalog.asp?cate=21">系统网络</a> <ul> <li id="menu-cate-15"><a href="http://www.tusay.net/catalog.asp?cate=15">XP</a></li> <li id="menu-cate-16"><a href="http://www.tusay.net/catalog.asp?cate=16">Win 7</a></li> <li id="menu-cate-17"><a href="http://www.tusay.net/catalog.asp?cate=17">多系统</a></li> <li id="menu-cate-18"><a href="http://www.tusay.net/catalog.asp?cate=18">网络连接</a></li> </ul> </li> <li id="menu-cate-19"><a href="http://www.tusay.net/catalog.asp?cate=19">故障处理</a></li> <li id="menu-cate-20"><a href="http://www.tusay.net/catalog.asp?cate=20">其他</a></li> <li id="menu-page-18"><a href="http://www.tusay.net/link.html">链接</a></li> <li id="menu-page-19"><a href="http://www.tusay.net/guestbook.html">留言</a></li>
说明：
<li><ul>...</ul><l/i>
把需要做子栏的项目包起来，成列显示。
修改完成后，提交下，然后文件重建下就可以了。
