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、下拉菜单，下拉效果如下：
