在看到《css设计彻底研究》第9章用dl,dt,dd制作二级菜单时感觉这个方法很有用，于是就现做了一个“copy版”的。个人觉得这个菜单最大的优点在于它符合web标准，而且采用纯css+xhtml制作，避免了使用JS的烦杂。很有用!

xhtml的框架如下：

<ul id=”menu”>
<li>
<!–[if lte ie 6]> <a href=”#”><table><tr><td> <![endif]–>
<dl>
<dt><a href=”#”>Home</a></dt>
<dd><a href=”#”>house</a></dd>
<dd><a href=”#”>frame</a></dd>
<dd><a href=”#”>panel</a></dd>
<dd class=”last”><a href=”#”>buttom</a></dd>
</dl>
<!–[if lte ie 6]> </td></tr></table></a> <![endif]–>
</li>
<li>
<!–[if lte ie 6]> <a href=”#”><table><tr><td> <![endif]–>
<dl>
<dt><a href=”#”>Desgin</a></dt>
<dd><a href=”#”>Graphics</a></dd>
<dd><a href=”#”>UI</a></dd>
<dd><a href=”#”>Web</a></dd>
<dd class=”last”><a href=”#”>Photo</a></dd>
</dl>
<!–[if lte ie 6]> </td></tr></table></a> <![endif]–>
</li>
<li>
<!–[if lte ie 6]> <a href=”#”><table><tr><td> <![endif]–>
<dl>
<dt><a href=”#”>About</a></dt>
<dd><a href=”#”>us</a></dd>
<dd><a href=”#”>out</a></dd>
<dd><a href=”#”>you</a></dd>
<dd class=”last”><a href=”#”>your</a></dd>
</dl>
<!–[if lte ie 6]> </td></tr></table></a> <![endif]–>
</li>
</ul>

css样式代码如下:

*{ margin:0px; padding:0px;}
body{ font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;padding-top:20px;
}
h2{ text-align:center; color:#0f0; }
#menu{ border:1px dashed #000;
width:600px;
height:150px;
margin:10px auto;
list-style:none;
padding:10px 0px 10px 80px;
}
#menu table{ border-collapse:collapse;}/*for_ie6*/
#menu li{ width:150px;
float:left;
margin:0 1px 0 0;
}
#menu li dl{ background:#30f735 url(bottom.gif) left bottom no-repeat;
width:150px;
padding-bottom:10px;
}
#menu li dl dt{ background:#30f735 url(top.gif) left top no-repeat;
padding-bottom:10px;
border-bottom:1px solid #666;
padding:5px;
text-align:center;
}
#menu li dl:hover dd,#menu li a:hover dd{ display:block;}
#menu li:hover, #menu li a:hover { border:0;}/*for_ie6*/
#menu li dl dt a{ display:block;
color:#333;
text-decoration:none;
}
#menu li dd{
display:none;
}
#menu li dl dd a{ display:block;
font-size:10px;
text-decoration:none;
height:15px;
background:#CCFF99 url(arrow.jpg) no-repeat 55px 8px;
padding-left:60px;
padding-top:3px;
}
#menu li dl dd a:hover{ background:#3c3c3c; color:#fff;}
#menu li dl dd.last{ border-bottom:1px solid #999;}

在做的时候最大的困难在于css代码中的“#menu li a:hover { border:0;}”这行，自己做的时候没在意它，但是做完后在ie6下测试时无法响应鼠标事件，当加上后一切正常，这一点我现在还有点想不通。呵呵！慢慢来吧！

查看最终效果