在群里见到群友在问dedecms怎么实现二级导航，反应网上很多教程都不能使用，抽空写了这篇教程，希望对大家有帮助，举一反三，话不多少先看效果：

   

   演示地址：dedecms实现二级导航

   首先在你的css里面加入

   
        /******导航******/
*{PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px}
A {text-decoration:none;}
DIV{WORD-WRAP: break-word; WORD-BREAK: break-all}
LI{LIST-STYLE-TYPE: none; LIST-STYLE-IMAGE: none}
.nav{MARGIN: 7px auto 0px; WIDTH: 968px; OVERFLOW: hidden}
.nav LI{FLOAT: left; HEIGHT: 48px}
.nav_left{WIDTH: 8px; BACKGROUND: url(img/s02.gif) no-repeat}
.nav_center{WIDTH: 952px; BACKGROUND: url(img/s03.gif) repeat-x; FONT-SIZE: 16px}
.nav_right{WIDTH: 8px; BACKGROUND: url(img/s04.gif) no-repeat}
.nav_li_li{PADDING-RIGHT: 2px; BACKGROUND: url(img/s05.gif) no-repeat right top}
.nav A{PADDING-BOTTOM: 0px; LINE-HEIGHT: 42px; PADDING-LEFT: 49px; PADDING-RIGHT: 49px; FLOAT: left; HEIGHT: 48px; COLOR: #fff; PADDING-TOP: 0px}
.nav .nav_on{BACKGROUND: url(img/s06.jpg) no-repeat center top; TEXT-DECORATION: none}
.nav A:hover{BACKGROUND: url(img/s06.jpg) no-repeat center top; TEXT-DECORATION: none}
.nav_li_li DIV{Z-INDEX: 1000; BORDER-BOTTOM: #5970b2 1px solid; POSITION: absolute; BORDER-LEFT: #5970b2 1px solid; PADDING-BOTTOM: 5px; MARGIN-TOP: 42px; PADDING-LEFT: 5px; WIDTH: 190px; PADDING-RIGHT: 5px; ZOOM: 1; BACKGROUND: #ffffff 0px 0px; VISIBILITY: hidden; BORDER-TOP: #5970b2 1px solid; BORDER-RIGHT: #5970b2 1px solid; PADDING-TOP: 5px}
.nav_li_li DIV A{POSITION: relative; TEXT-ALIGN: center; PADDING-BOTTOM: 5px; LINE-HEIGHT: 18px; MARGIN: 0px; PADDING-LEFT: 5px; WIDTH: 80px; PADDING-RIGHT: 5px; DISPLAY: block; WHITE-SPACE: nowrap; BACKGROUND: #ffffff 0px 0px; HEIGHT: 18px; COLOR: #2875de; FONT-SIZE: 12px; TEXT-DECORATION: none; PADDING-TOP: 5px}
.nav_li_li DIV A:hover{BACKGROUND: #49a3ff; COLOR: #fff}

   调用js，记得修改路径：

   
           <SCRIPT type="text/javascript"src="foot.js"></SCRIPT>

   dedecms标签实现的方法：

   
         <UL class=nav>          

          <LI class=nav_left></LI>          

          <LI class=nav_center>          

          <UL>          

        <LI class=nav_li_li><A  href="{dede:global.cfg_cmsurl/}/">首页</A></LI>          

        {dede:channelartlist  typeid='top' row='10'}          

        <LI class="nav_li_li">          

        <A onmouseover="mopen('{dede:field.typeurl/}')"   onmouseout=mclosetime() href="{dede:field.typeurl/}">{dede:field.typename/}</A>           

        <DIV id={dede:field.typeid/} onmouseover=mcancelclosetime() onmouseout=mclosetime()>          

        <A href="{dede:field.typeurl/}">全部分类</A>          

        {dede:channel type='son' }          

        <A href="[field:typeurl/]">[field:typename/]</A>          

        {/dede:channel} 

        {/dede:channelartlist}          

         </DIV></LI>          

        </UL></LI>          

          <LI class=nav_right></LI></UL>

   大家根据自己的喜好修改导航样式，这里就不做太多的说明，有什么问题，可以评论留言给我。尽自己最大可能帮助大家！最后转载请注明出处，谢谢！


织梦实现二级导航菜单打包 下载地址：http://pan.baidu.com/s/1mgn4m3A