<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>