您的位置：首页 > Web前端 > JavaScript

javaScript基础练习题-下拉框制作(CSS)

2015-12-06 16:22 691 查看

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航