CSS二级菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>二级菜单的实现</title>
<style type="text/css">
#menu{
margin:0;padding:0;width:610px;
list-style-type:none;font:14px Arial;
}
#menu li{
float:left;
width:150px; padding:0; margin:0 1px 0 0;
}
#menu li dl
{
width:150px;
margin:0;
padding:0 0 10px 0;
background:#cb6 url(../image/bottom.gif) no-repeat bottom left;
}
#menu li dt
{
margin:0;padding:5px; text-align:center;
border-bottom:1px solid #b00;
}
#menu li dt.orange { background:#fa5 url(../image/top.gif) no-repeat top left;}
#menu li dt.yellow { background:#ee5 url(../image/top.gif) no-repeat top left;}
#menu li dt.green { background:#5e5 url(../image/top.gif) no-repeat top left;}
#menu li dt.blue { background:#5cf url(../image/top.gif) no-repeat top left;}
#menu li dt a,#menu li dt a:visited
{
display:block; color:#333; text-decoration:none;
}
#menu li dd{ margin:0; padding:0;color:#fff;background:#47a; display:none;}
#menu li dd.last{border-bottom:1px solid #b00;}
#menu li dd a,#menu li dd a:visited{
display:block;
color:#fff;
text-decoration:none;
padding:4px 5px 4px 20px;
background:#47a url(../image/arrow.gif) no-repeat 10px 10px;
height:1em;
}
#menu li:hover dd , #menu li a:hover dd { display:block;}
#menu li:hover, #menu li a:hover { border:0;}
#menu li dd a:hover{ background:#147;color:#9cf;}
#menu table{
border-collapse:collapse;
padding:0;margin:-1px;font-size:1em;
}
</style>
</head>
<body>
<ul id="menu">
<li>
<!--[if lte IE 6]><a href="#"><table><tr><td><![endif]-->
<dl>
<dt class="orange"><a href="#">Web 前端</a></dt>
<dd><a href="#">Javascript</a></dd>
<dd><a href="#">CSS样式</a></dd>
<dd><a href="#">HTML</a></dd>
<dd class="last"><a href="#">flash/Actionscript</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 class="green"><a href="#">服务器端语言</a></dt>
<dd><a href="#">C#</a></dd>
<dd><a href="#">PHP</a></dd>
<dd><a href="#">Java</a></dd>
<dd><a href="#">C++</a></dd>
<dd class="last"><a href="#">VB</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 class="yellow"><a href="#">数据库语言</a></dt>
<dd><a href="#">MySQL</a></dd>
<dd><a href="#">SQL Server</a></dd>
<dd><a href="#">Oracle</a></dd>
<dd class="last"><a href="#">Access</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 class="blue"><a href="#">手机开发</a></dt>
<dd><a href="#">Android</a></dd>
<dd><a href="#">Iphone</a></dd>
<dd class="last"><a href="#">Nokia</a></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</body>
</html>
