前段时间为了给网站的导航加入下拉菜单找了很多例子，期间尝试了使用Fireworks及DW直接生成菜单，但觉得可订制性都不理想，最后参照蓝色理想的相关文章改出一个较为合适DIV+Css下拉菜单。
该菜单代码还有待优化与改进，但其基本功能都实现了，该代码中的下拉项是DEDECMS相应栏目下的文章。以下代码仅包括关键部分
#nav {
list-style-type: none; background:#111;
}
#nav a {
display: block; width: 103px; text-align:center;
}
#nav a:link {
color:#FFF; text-decoration:none;
}
#nav a:visited {
color:#FFF;text-decoration:none;
}
#nav a:hover {
color:#FFF;text-decoration:none;
}
/*--导航栏目项属性--*/
#nav li {
float: left; width: 103px;
}
#nav li a{
width:103px;
height:51px;
}
/*--各导航栏目背景链接变化--*/将栏目名所在区块的背景做成响应鼠标事件从而实现图像转换功能
#tscp a:hover{
background-image:url({dede:global.cfg_templeturl/}/images/index_nav32.jpg);
}
#tscp a{
background-image:url({dede:global.cfg_templeturl/}/images/index_nav3.jpg);
}
/*--整体下拉框属性--*/ 该部分实际上是使用了绝对position:absolute将下拉框定 位到了屏幕以外的位置，当鼠标放到链接区时，再定到出现的位置。
#nav li ul {
list-style-type: none;
text-align:left;
left: -999em;
width: 103px;
position: absolute;
background:#33CC00;
}
/*--下拉菜单单项属性--*/
#nav li ul li{
float: left;
width:103px;
border-bottom:1px solid #fff;
}
#nav li ul a{
display: block;
text-align:left;
text-align:center;
background-image:none;
padding-top:10px;
padding-bottom:10px;
color:#000;
text-decoration:none;
height:20px;
}
#nav li ul a:hover {
color:#0000ff;
background:#FFFF00;
font-weight:bold;
}
/*未知属性*/
#nav li:hover ul {
left: auto;
}
#nav li.sfhover ul {
left: auto;
}
#content {
clear: left;
}
HTML代码：
<ul id="nav">
<li id="tscp"><a href="/plus/list.php?tid=2"></a>
<ul>
{dede:arclist row=10 typeid='2' }
<li><a href="[field:arcurl/]">[field:title/]</a></li>
{/dede:arclist}
</ul>
</li>
</ul>
