看到很多人都在问双行导航栏的实现，今天看到某个兄弟发的自己的网站，感觉不错，分析了一下，写在这里

到模板里-找到“默认模板管理”找到HEAD.HTM主页模板，选择修改

找到如下代码：

   <div class="nav mt1">
      <div class="w960 center">
        <ul>
          <li><a href='{dede:global.cfg_cmsurl/}/'>主页</a></li>
          {dede:channel type='top' currentstyle="<li class='thisclass'><a href='~typelink~'>~typename~</a> </li>"}
          <li><a href='[field:typeurl/]'>[field:typename/]</a></li>{/dede:channel}
        </ul>
      </div>
    </div>

这里就是默认调用的自动生成的导航栏目，我本来希望官方尽快更新换行功能的，不过自己动手丰衣足食嘛，所以咱们就修改一下咯
当然大家一定要备份好这里代码，如果官方实现了这个功能再放回去，调用一下自动排列，岂不快哉？

然后把他们修改成如下代码：

<div class="navigation">
    <div class="nav_text">
        <div class="bgl"></div>
        <ul class="people">
            <li><a href="/tcm">中医</a></li>
            <li><a href="/med">西医</a></li>
            <li><a href="/huli">护理</a></li>
            <li><a href="/120" class="yellow">急救</a></li>
        </ul>

        <ul class="snews">
            <li class="h"><a href="/news" title="新闻中心" class="head">新闻</a></li>
            <li><a href="/news/hydt">行业</a></li>
            <li><a href="/news/zcfg">政策</a></li>
            <li><a href="/news/yhjd">医患</a></li>
            <li><a href="/news/ypkd">药品</a></li>
            <li><a href="/news/kjyf">科研</a></li>
            <li><a href="/news/ylgl">医疗</a></li>
            <li><a href="/news/cyyx">产经</a></li>
            <li><a href="/news/jkzx">健康</a></li>
            <li><a href="/news/xfpl">评论</a></li>
            <li><a href="/news/yqxw">药企</a></li>
            <li><a href="/special/" class="yellow">专题</a></li>
            <li><a href="/pic/">图片</a></li>
       </ul>
        <ul class="living">
            <li class="h"><a href="http://baike.doctor001.com/" title="医学百科" class="head">百科</a></li>
            <li><a href="http://baike.doctor001.com/?category-view-1.shtml" class="yellow">查疾病</a></li>
            <li><a href="http://baike.doctor001.com/?category-view-2.shtml">查症状</a></li>
            <li><a href="http://baike.doctor001.com/?category-view-4.shtml">查药品</a></li>
            <li><a href="http://baike.doctor001.com/?category-view-3.shtml">检查</a></li>
            <li><a href="http://baike.doctor001.com/?category-view-6.shtml">找医院</a></li>
            <li><a href="http://baike.doctor001.com/?category-view-276.shtml">找医生</a></li>
            <li><a href="http://baike.doctor001.com/?category-view-301.shtml">保健品</a></li>
            <li><a href="http://baike.doctor001.com/?category-view-5.shtml">中药</a></li>
        </ul>
        <ul class="disease">
            <li class="h"><a href="/health" title="保健频道" class="head">保健</a></li>
            <li><a href="/health/bjxw">新闻</a></li>
            <li><a href="/health/lxbj">两性</a></li>
            <li><a href="/health/blbj">白领</a></li>
            <li><a href="/health/jmjs">健美</a></li>
            <li><a href="/health/gbzq">肝病</a></li>
            <li class="s">|</li>
            <li><a href="/man">男性</a></li>
            <li><a href="/lady" class="yellow">女性</a></li>
            <li><a href="/health/jfzq">减肥</a></li>
            <li><a href="/health/gkbj">临床</a></li>
            <li><a href="/health/qcqbj">特殊</a></li>
            <li><a href="/food">美食</a></li>
            <li><a href="/ys">养生</a></li>
            <li class="s">|</li>
            <li><a href="/old">老人</a></li>
            <li><a href="/baby">育儿</a></li>
        </ul>
        <ul class="community">
            <li class="h"><a href="http://bbs.doctor001.com/" title="互动中心" class="head" target="_blank">互动</a></li>
            <li><a href="/ask" class="yellow" target="_blank">求医问药</a></li>
            <li><a href="http://home.doctor001.com/" target="_blank">博客</a></li>
            <li><a href="/wap.html" class="yellow" target="_blank">手机浏览</a></li>
            <li><a href="http://bbs.doctor001.com/" target="_blank">论坛</a></li>
        </ul>
    </div>  
</div>

内容修改完了，下一步就是修改样式了，也就是控制内容显示的方式，比如自体多大，颜色是啥

嘿嘿，废话不说，大家找到/templets/style/dedecms.css
这个文件，在

/*---------- import ---------*/
@import url("layout.css");
@import url("page.css");


/*---------- base ---------*/

加入一句

@import url("navbar.css");

变成

/*---------- import ---------*/
@import url("layout.css");
@import url("page.css");
@import url("navbar.css");

/*---------- base ---------*/

好了，然后用记事本打开个空白文件，把下列代码复制进入，然后另存为名字为navbar.css，上传到/templets/style/目录下面，OK！

/* 主导航 CSS */
.yellow {color:#fc0!important;}
.navigation {height:53px; width:960px; margin:0px auto;}
.navigation ul,.navigation li {float:left;list-style-type:none;padding:0;margin:0;}
.navigation li {line-height:normal;overflow:visible!important;font-size:12px;}


.navigation .nav_text, .navigation .nav_icon {float:left;width:970px;margin:0 0 0 5px!important;display:inline; padding: 0;}
.navigation .nav_text {width:970px;height:53px;background:url(../images/nav_line.gif) repeat-x 0 0!important;}
.navigation .nav_text .bgl{float:left;width:5px;height:53px;background:url(../images/nav_bg.gif) no-repeat -148px 0!important;}
.navigation .nav_text .bgr{float:right;width:5px;height:53px;background:url(../images/nav_bg.gif) no-repeat -153px 0!important;}
.navigation .nav_text .bgl, .navigation .nav_text .bgr {
    margin: 0; padding: 0;
}
.navigation .nav_text ul {margin:4px 0 0 0;}
.navigation .nav_text .people {width:70px;}
.navigation .nav_text .disease {width:295px;}
.navigation .nav_text .disease .s {width:4px;margin:5px 0 0 7px;+margin:6px 0 0 7px;background:none;}
.navigation .nav_text .living {width:212px;}
.navigation .nav_text .snews {width:245px;}
.navigation .nav_text .community {width:130px;}
.navigation .nav_text .community .q {background:url(../images/s_icon.gif) no-repeat 34px -39px;}
.navigation .nav_text li {margin:5px 0 1px 10px;color:#fff;display:inline;}
.navigation .nav_text a {color:#fff;line-height:15px;}
.navigation .nav_text a:hover {color:#fc0;}
.navigation .nav_text .head {float:left;width:27px;height:45px;margin:0;text-indent:-2000px;background:url(../images/nav_bg.gif) no-repeat 0 0;}
.navigation .nav_text .h {margin-top:0;background:none;}
.navigation .nav_text .disease .head {background-position: 0 0;}
.navigation .nav_text .disease .head:hover {background-position:0 -55px;}
.navigation .nav_text .living .head {background-position:-37px 0;}
.navigation .nav_text .living .head:hover {background-position:-37px -55px;}
.navigation .nav_text .snews .head {background-position:-74px 0;}
.navigation .nav_text .snews .head:hover {background-position:-74px -55px;}
.navigation .nav_text .community .head {background-position:-111px 0;}
.navigation .nav_text .community .head:hover {background-position:-111px -55px;}
.navigation .nav_icon {width:968px;height:55px;border:#ddd 1px solid; background: none!important;}
.navigation .nav_icon li {background:url(../images/icon_ks.gif) no-repeat 0 -698px;padding:0 0 0 1px;}
.navigation .nav_icon li a {float:left;height:13px;padding:35px 14px 0 14px;background:url(../images/icon_ks.gif) no-repeat;}
.navigation .nav_icon .i1 {background-position:8px 0;}
.navigation .nav_icon .i2 {background-position:8px -49px;}
.navigation .nav_icon .i3 {background-position:8px -97px;}
.navigation .nav_icon .i4 {background-position:12px -145px;}
.navigation .nav_icon .i5 {background-position:26px -193px;}
.navigation .nav_icon .i6 {background-position:21px -242px;}
.navigation .nav_icon .i7 {background-position:23px -289px;}
.navigation .nav_icon .i8 {background-position:12px -335px;}
.navigation .nav_icon .i9 {background-position:12px -379px;}
.navigation .nav_icon .i10 {background-position:13px -426px;}
.navigation .nav_icon .i11 {background-position:5px -470px;}
.navigation .nav_icon .i12 {background-position:12px -518px;}
.navigation .nav_icon .i13 {background-position:8px -565px;}
.navigation .nav_icon .i14 {background-position:11px -612px;}
.navigation .nav_icon .i15 {background-position:5px -657px;padding-right:0;height:20px;}
.navigation .nav_icon .i15 span {background:url(../images/icon_ks.gif) no-repeat -7px -765px;padding-right:15px;}

最后就是把几个图片传到/templets/images目录下，我已经打了包，一共4个文件
images.rar