<style type="text/css"> * { margin: 0; padding: 0; } #menu { position: relative; background-color: #000; width: 100%; height: 55px; } .logo { color: #57d4ce; display: inline-block; line-height: 55px; position: absolute; padding: 0 40px; } ul { list-style: none; display: inline-block; padding-left: 136px; } ul li { line-height: 55px; text-align: center; position: relative; float: left; } a { text-decoration: none; color: #fff; display: block; padding: 0 20px; white-space: nowrap; } a:hover { color: #FFF; background-color: #ccc; } ul li ul li { float: none; margin-top: 2px; background-color: #000; } ul li ul li a:hover { color: #FFF; background-color: #ccc; } ul li ul { position: absolute; left: 0; top: 55px; display: none; padding-left: 0; } ul li:hover ul { display: block; } </style>
上面的代码是css的配置。
下面是具体的运用以及效果。
<ul> <li><a href="#">首页</a></li> <li> <a href="#">课程大厅</a> <ul> <li><a href="#">JavaScript</a></li> <li><a href="#">jQuery</a></li> </ul> </li> <li> <a href="#">学习中心</a> <ul> <li><a href="#">视频学习</a></li> <li><a href="#">案例学习</a></li> <li><a href="#">交流平台</a></li> </ul> </li> <li> <a href="#">经典案例</a> <ul> <li><a href="#">华中科技大学</a></li> <li><a href="#">中南大学</a></li> <li><a href="#">湖南大学</a></li> </ul> </li> <li> <a href="#">关于我们</a> <ul> <li><a href="#">公司简介</a></li> <li><a href="#">人才招聘</a></li> <li><a href="#">联系我们</a></li> </ul> </li> </ul>