额，今天心血来潮做了个简单的下拉菜单，不过用的css操作的，啧！
最终效果：
代码：
<!DOCTYPE html><html><head><title>DaoHang</title><meta charset="utf-8"><style type="text/css">*{margin:0px; padding: 0px; }#dh{position: relative;margin-top: 0px;width: 400px;height:40px;border: 0px;background-color: #0099CC;}#dh ul{padding: 0px;}a{color: #FFF;width: 100px;height: 40px;display: block;text-decoration: none;text-align: center;line-height: 40px;font-family: Microsoft Yahei;font-weight: 2px;}#dh {margin:0px auto; }#dh ul li {list-style: none;float: left;}#dh ul li a:hover{background-color: #6699FF;}#dh ul:hover{display: block;}#dh ul li ul{background-color: #0099CC;position: absolute;display: none;}#dh ul li ul li{float: none;background-color: #6688EE;}#dh ul li ul li a{font-size: 13px;font-weight: 0px;}#dh ul li:hover ul{ /*二级菜单的触发点*/display: block;}</style></head><body><div id="dh"><ul><li><a href="#">首页</a></li><li><a href="#">课程内容</a><ul><li><a href="#">Java</a></li><li><a href="#">Javascript</a></li><li><a href="#">HTML</a></li></ul></li><li><a href="#">实验内容</a><ul><li><a href="#">Java试验1</a></li><li><a href="#">Java试验2</a></li><li><a href="#">Java试验3</a></li></ul></li><li><a href="#">关于我们</a><ul><li><a href="#">网站历史</a></li><li><a href="#">联系方式</a></li></ul></li></ul></div></body></html>
如果觉得《html+css简单下拉菜单制作》对你有帮助，请点赞、收藏，并留下你的观点哦！
