使用DEDECMS做网站的时候，有时候需要制作下拉菜单。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;
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效果。