纯css制作的下拉菜单
1、新建test.html文件，截图如下
2、html部分的关键代码截图如下：
3、css部分菜单条关键代码截图如下：
4、css部分隐藏的下拉条部分的代码截图如下：
5、test.html文件完整代码如下：
<doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
body{margin:0px;}
#menu{ width:100%; height:31px; background-color:#c9c9a7; position:relative;}
#menu ul {
padding:0;
margin:0;
list-style-type: none;
}
#menu ul li {
float:left;
position:relative;
}
#menu ul li a ,#menu ul li a:visited {
display:block;
text-align:center;
text-decoration:none;
width:104px;
height:30px;
color:#000;
border-top: 1px solid #c9c9a7;
border-right:1px solid #fff;
border-width:1px 1px 0 0;/*上右下左*/
background:#c9c9a7;
line-height:30px;
font-size:11px;
}
/* make the dropdown ul invisible */
#menu ul li ul {
display: none;
}
#menu ul li:hover a {
color:#fff;
background:#b3ab79;
}
#menu ul li:hover ul {
display:block;
position:absolute;
top:31px;
left:0;
width:105px;
}
#menu ul li:hover ul li a {
display:block;
background:#faeec7;
color:#000;
width:204px;/*控制下拉框的宽度*/
}
/* style the background and forground colors of the links on hover */
#menu ul li:hover ul li a:hover {
background:#dfc184;
color:#000;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="">菜单一</a>
<ul>
<li><a href="">子菜单1</a></li>
<li><a href="">子菜单3</a></li>
</ul>
</li>
<li><a href="">菜单二</a>
<ul>
<li><a href="">子菜单4</a></li>
<li><a href="">子菜单5</a></li>
<li><a href="">子菜单6</a></li>
</ul>
</li>
<li><a href="">菜单三</a>
<ul>
<li><a href="">子菜单4</a></li>
<li><a href="">子菜单5</a></li>
<li><a href="">子菜单6</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
6、运行截图如下：
7、下拉菜单，下拉效果如下：
