http://www.imooc.com/video/155
慕课网的视频,直接上代码
<!DOCTYPE hmtl>
<html>
<head>
<meta charset="utf-8" />
<title>
</title>
<style type="text/css">
* {
margin: 0px;
padding:0px;
}
#nav{
background-color: #eee;
width: 600px;
height: 40px;
margin: 0 auto;
text-align:center;
}
ul{list-style:none }
ul li{float: left; line-height:40px; text-align: center;position: relative;}
a {
text-decoration: none;
display:block;
padding: 0 10px;
}
a:hover{
color: #fff;background-color: #666;
}
/*这句的意思是当鼠标滑到ul li 上方时当前的ul li ul显示 */
ul li:hover ul{
display: block;
}
ul li ul li {
float: none;background-color: #eee;margin-top: 2px;
}
ul li ul {
/*绝对定位必须何left,top等组合使用,top:40px,是因为其父亲li的lineheight是40px;*/
position: absolute;left: 0px;top:40px;display: none;
}
</style>
</hean>
<body>
<div id="nav">
<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></li>
<li><a href="#">经典案例</a>
<ul>
<li><a href="#">BBS</a></li>
<li><a href="#">newsSystemnewsSystem</a></li>
</ul>
</li>
<li><a href="#">关于我们</a></li>
</ul>
</div>
</body>
</html>
时间： 2024-10-10 11:06:30