纯CSS打造的一款简约的灰色下拉菜单
代码简介：
纯CSS两级下拉菜单，见得多了吧？本款完全是用CSS实现，没有任何的JavaScript代码，兼容性方面在IE8下没问题，IE6/IE7尚未测试。
代码内容：
View Code
<!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>纯CSS打造的一款简约的灰色下拉菜单_网页代码站(www.webdm.cn)</title>
<style type="text/css">
.navigation {
margin:0;
padding:0;
width:610px;
list-style-type:none;
font:12px Arial;
float:left;
}
.navigation li {
float:left;
padding:0;
margin:0 10px 0 0;
_margin:0 2px 0 0;
width:150px;
}
/* 选单区块*/
.navigation li dl {
width:150px;/*ie6*/
margin:0;
padding:0;
background-color:#fff;
border:solid 2px #666;
}
.navigation li dt a , .navigation li dd a{ display:block;}
/* 主选单dt */
.navigation li dt {
margin:0;
padding: 5px;
text-align:center;
background-color:#fff;
font-size: 12px;
font-weight: bold;
height:15px;
overflow:hidden;
}
.navigation li dt a ,.navigation li dt a:visited {
display:block;
color:#333;
text-decoration:none;
}
/* 子选单dd */
.navigation li dd {
margin:0;
padding:0;
color: #333;
background-color:#efefef;
border-bottom:dotted 1px #666;
}
.navigation li dd.last {
border-bottom:0;
}
.navigation li dd a, .navigation li dd a:visited {
display:block;
color:#333;
text-decoration:none;
padding:4px 5px 4px 20px;
}
/*隐藏子选单*/
.navigation li dd { display:none;}
/* 滑鼠滑入显示子选单 */
.navigation li:hover dd, .navigation li a:hover dd { display:block;}
/*ie6 hack*/
.navigation li:hover,.navigation li a:hover { border:0;}
.navigation table { border-collapse:collapse;
padding:0;
text-align:left;
}
</style>
</head>
<body>
<ul class="navigation">
<li>
<!--[if lte IE 6]><a href="#"><table><tr><td><![endif]-->
<dl>
<dt><a href="/">网页代码站</a></dt>
<dd><a href="http://www.webdm.cn">网站首页</a></dd>
<dd><a href="#">最新更新</a></dd>
<dd class="last"><a href="#">最新排行</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="#">Photoshop</a></dt>
<dd><a href="http://www.webdm.cn">Macromedia</a></dd>
<dd class="last"><a href="http://www.webdm.cn">Microsoft</a></dd>
</dl>
</li>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
<li>
<!--[if lte IE 6]><a href="#"><table><tr><td><![endif]-->
<dl>
<dt><a href="#">jQuery</a></dt>
<dd><a href="http://www.webdm.cn">Prototype</a></dd>
<dd class="last"><a href="#">辅助工具</a></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<br />
<p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码！</p>
</body>
</html>
代码来自：http://www.webdm.cn/webcode/9ba1f936-338d-4d0a-adcb-3c813cc19b00.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>纯CSS打造的一款简约的灰色下拉菜单_网页代码站(www.webdm.cn)</title>
<style type="text/css">
.navigation {
margin:0;
padding:0;
width:610px;
list-style-type:none;
font:12px Arial;
float:left;
}
.navigation li {
float:left;
padding:0;
margin:0 10px 0 0;
_margin:0 2px 0 0;
width:150px;
}
/* 选单区块*/
.navigation li dl {
width:150px;/*ie6*/
margin:0;
padding:0;
background-color:#fff;
border:solid 2px #666;
}
.navigation li dt a , .navigation li dd a{ display:block;}
/* 主选单dt */
.navigation li dt {
margin:0;
padding: 5px;
text-align:center;
background-color:#fff;
font-size: 12px;
font-weight: bold;
height:15px;
overflow:hidden;
}
.navigation li dt a ,.navigation li dt a:visited {
display:block;
color:#333;
text-decoration:none;
}
/* 子选单dd */
.navigation li dd {
margin:0;
padding:0;
color: #333;
background-color:#efefef;
border-bottom:dotted 1px #666;
}
.navigation li dd.last {
border-bottom:0;
}
.navigation li dd a, .navigation li dd a:visited {
display:block;
color:#333;
text-decoration:none;
padding:4px 5px 4px 20px;
}
/*隐藏子选单*/
.navigation li dd { display:none;}
/* 滑鼠滑入显示子选单 */
.navigation li:hover dd, .navigation li a:hover dd { display:block;}
/*ie6 hack*/
.navigation li:hover,.navigation li a:hover { border:0;}
.navigation table { border-collapse:collapse;
padding:0;
text-align:left;
}
</style>
</head>
<body>
<ul class="navigation">
<li>
<!--[if lte IE 6]><a href="#"><table><tr><td><![endif]-->
<dl>
<dt><a href="/">网页代码站</a></dt>
<dd><a href="http://www.webdm.cn">网站首页</a></dd>
<dd><a href="#">最新更新</a></dd>
<dd class="last"><a href="#">最新排行</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="#">Photoshop</a></dt>
<dd><a href="http://www.webdm.cn">Macromedia</a></dd>
<dd class="last"><a href="http://www.webdm.cn">Microsoft</a></dd>
</dl>
</li>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
<li>
<!--[if lte IE 6]><a href="#"><table><tr><td><![endif]-->
<dl>
<dt><a href="#">jQuery</a></dt>
<dd><a href="http://www.webdm.cn">Prototype</a></dd>
<dd class="last"><a href="#">辅助工具</a></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<br />
<p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码！</p>
</body>
</html>
代码来自：http://www.webdm.cn/webcode/9ba1f936-338d-4d0a-adcb-3c813cc19b00.html
