用DEDE套站的时候，有时候需要制作下拉菜单。dede5.5有下拉菜单，比较不错，有需要的可以直接到5.5的模板里面去借鉴。这里我分享一下个人的dedeCMS制作js+css下拉菜单的经验，此菜单兼容5.5到5.7版本的dedeCMS。

dedeCMS导航下拉菜单的调用

dedeCMS下拉菜单实际上就是顶级栏目和每个栏目的子栏目的一个循环调用，我使用了以下代码，实现了这种调用。

<ul id=”mainnav”>

<li class=”home”><a href=”/”>主页</a></li>

{dede:channelartlist typeid=’top’}

<li>{dede:type}<a href=”[field:typeurl/]” >[field:typename/]</a>{/dede:type}

<ul>

{dede:channel type=’son’}

<li><a href=”[field:typeurl/]“>[field:typename/]</a></li>

{/dede:channel}

</ul>

</li>

{/dede:channelartlist}

</ul>

这种调用方法无法实现当前页效果，如果要实现当前页效果，请参考dedecms官方的下拉菜单制作方法。

比较重要的CSS样式

这里比较重要的是注意CSS的应用，以下是该菜单完整的CSS代码。如果需要其他效果，请自行修改。

/* mainnav */

#mainnav {

background:#002a6c;

border:1px solid #0f2851;

border-top:none;

padding-left:20px;

width:878px;

height:30px;

position:relative;

clear:both;

}

#mainnav li {

float:left;

width:95px;

position:relative;

}

#mainnav li ul {

position: absolute;

left: 0px;

top: 30px;

display: none;

background:#133b7c;

z-index:1000;

}

#mainnav li a {

display: block;

font:bold 14px/30px “微软雅黑”;

text-align:center;

text-decoration: none;

color:#fff;

}

#mainnav li a:hover, #mainnav li.on a {

text-decoration:none;

color:#fff;

background:#133b7c;

}

#mainnav li ul li a {

font-weight:normal;

width:150px;

text-align:left;

padding-left:25px;

line-height:25px;

font-size:12px;

color:#9cf;

background:#133b7c;

}

#mainnav li ul li a:hover { color: #9cf; background:#012a6c }

* html #mainnav li {

float: left;

height: 1%;

}

* html #mainnav li a { height: 1%; }

#mainnav li:hover ul, #mainnav li.over ul { display: block; }

实现下拉菜单效果的js

本来打算使用纯CSS来解决下拉菜单问题，奈何垃圾IE6依然有着顽强的生命力，为了它去浪费时间做兼容，实在是耗时耗力。幸好本人没有js洁癖，于是选择了用简单的js来搞定，这里本人使用下面的代码：

startList = function() {

if (document.all && document.getElementById) {

var mainnavRoot = document.getElementById(“mainnav”);

for (var i = 0; i < mainnavRoot.childNodes.length; i++) {

var node = mainnavRoot.childNodes[i];

if (node.nodeName == “LI”) {

node.onmouseover = function() {

this.className += ” over”;

}

node.onmouseout = function() {

this.className = this.className.replace(” over”, “”);

}

}

}

}

}

window.onload = startList;

其中要注意的是getElementByid(“mainnav”)中dmainnav是导航条的ID。

到此，一款效果简洁的JS+CSS下拉菜单就搞定了。样式很粗糙，如果要实现更佳的视觉效果，可以自行修改CSS代码添加背景，或者使用其他的js效果。