dedecms二级导航菜单实现方法

在群里见到群友在问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='2'} <LI> <A 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} </DIV></LI> </UL></LI> <LI class=nav_right></LI></UL>

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

dedecms二级导航打包下载