<!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>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
<title>纯CSS菜单</title>
<style type="text/css">
/*基本信息*/
* {
font-family:"宋体";
margin:0;padding:0;
}
body {
padding:15px;
}
/**/
.nav li dt a {
/*display:block;*/
}
/*导航样式*/
.nav ul {
list-style-type:none;
margin:0;
padding:0;
}
.nav ul li{
float:left;
line-height:24px;
display:block;
padding:0;
margin:0;
width:80px;
}
.nav ul li a{
display:block;
width:80px;
height:24px;
font-size:12px;
text-align:center;
color:#555;
text-decoration:none;
background:#f7f7f7;
}
.nav ul table{
width:100%;
border-collapse:collapse;
border:0;
padding:0;
margin:0;
}
.nav ul li dl{
display:none;
width:200px;
height:20px;
}
.nav ul li:hover,.nav ul li a:hover,.nav ul li a:active {
color:#555;
background-color:#f1f1f1;
display:block;
}
.nav ul li:hover dl,.nav ul li a:hover dl,.nav ul li a:active dl {
display:block;
width:100%;
}
.nav ul dl dt{
display:block;
width:100%;
border:none;
}
.nav ul dl dt a{
display:block;
color:blue;
border:none;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li><a href="####">首页</a>
</li>
<li><a href="####">导航2
<!--[if IE 7]><!--></a><!--<![endif]--><table cellpadding="0" cellspacing="0"><tr><td>
<dl>
<dt><a href="####">222221</a></dt>
<dt><a href="####">222221</a></dt>
<dt><a href="####">222221</a></dt>
</dl>
</td></tr></table><!--[if lte IE 6]></a><![endif]-->
</li>
<li><a href="####">导航3
<!--[if IE 7]><!--></a><!--<![endif]--><table cellpadding="0" cellspacing="0"><tr><td>
<dl>
<dt><a href="####">333331</a></dt>
<dt><a href="####">333331</a></dt>
<dt><a href="####">333331</a></dt>
</dl>
</td></tr></table><!--[if lte IE 6]></a><![endif]-->
</li>
<li><a href="####">导航4
<!--[if IE 7]><!--></a><!--<![endif]--><table cellpadding="0" cellspacing="0"><tr><td>
<dl>
<dt><a href="####">444441</a></dt>
<dt><a href="####">444441</a></dt>
<dt><a href="####">444441</a></dt>
</dl>
</td></tr></table><!--[if lte IE 6]></a><![endif]-->
</li>
<li><a href="####">导航5
<!--[if IE 7]><!--></a><!--<![endif]--><table cellpadding="0" cellspacing="0"><tr><td>
<dl>
<dt><a href="####">555551</a></dt>
<dt><a href="####">555551</a></dt>
<dt><a href="####">555551</a></dt>
</dl>
</td></tr></table><!--[if lte IE 6]></a><![endif]-->
</li>
<li><a href="####">导航6
<!--[if IE 7]><!--></a><!--<![endif]--><table cellpadding="0" cellspacing="0"><tr><td>
<dl>
<dt><a href="####">666661</a></dt>
<dt><a href="####">666661</a></dt>
<dt><a href="####">666661</a></dt>
</dl>
</td></tr></table><!--[if lte IE 6]></a><![endif]-->
</li>
</ul>
</div>
</body>
</html>
纯CSS菜单
最新推荐文章于 2023-12-28 18:29:15 发布