纯CSS下拉列表.png
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>纯CSS下拉菜单</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>
<h1 style="align-content:center">纯CSS下拉列表</h1>
<hr>
<ul class="navigation">
<li>
<!--[if lte IE 6]><a href="#"><table><tr><td><![endif]-->
<dl>
<dt><a href="#">站长提示</a></dt>
<dd><a href="#">网站首页</a></dd>
<dd><a href="#">导航菜单</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="#">站长特效</a></dt>
<dd><a href="#">欢迎光临</a></dd>
<dd class="last"><a href="#">欢迎光临</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="#">没什么用</a></dt>
<dd><a href="#">欢迎光临</a></dd>
<dd class="last"><a href="#">欢迎光临</a></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
</body>
</html>
