下拉框案例小结
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>下拉框案例小结</title>
<style type="text/css">
*{margin:0px;padding:0px;}
/*头部header*/
.header{
height: 50px;
width: 100%;
background:pink;
}
.header .nav{
height: 50px;
width: 1000px;
margin: 0px auto;
background:pink;
}
.item{
list-style: none;
float: left;
height: 50px;
line-height: 50px;
margin-right: 20px;
}
li{list-style: none;}
.item a{
text-decoration: none;
color: #fff;
font-size: 16px;
padding: 15px;
position: relative;
}
.item:hover {background-color: #ccc;}
.item a:hover {color: red;}
.xiala{background-color:#ccc;position: absolute; display: none;}
.item:hover .xiala{display: block;}
.item a:hover .xiala li{background-color:#6c6c6c; color: pink;}
/*主体部分main*/
.container{
width: 1000px;
height: 600px;
margin:5px auto;
background-color: #ccc;
}
.wrap{
width: inherit;
min-height: 600px;
background-color: blue;
float: left;
}
.main{
padding-left: 200px;
padding-right: 200px;
}
.left{
width: 200px;
min-height: 600px;
background-color: yellow;
float: left;
margin-left: -100%;
}
.right{
width: 200px;
min-height: 600px;
background-color: pink;
float: left;
margin-left:-200px;
}
/*底部footer*/
.footer{
width: 100%;
height:150px;
background-color: #000;
}
.footer_content{
width: 1000px;
height:150px;
margin:0 auto;
background-color: #000;
}
</style>
</head>
<body>
<div class="header">
<div class="nav">
<ul>
<li class="item"><a href="">首页</a></li>
<li class="item"><a href="">视频教程</a></li>
<li class="item"><a href="">社区问答</a></li>
<li class="item"><a href="">编程词典</a></li>
<li class="item"><a href="">手册下载</a></li>
<li class="item"><a href="">工具下载</a></li>
<li class="item"><a href="">特色课程</a></li>
<li class="item"><a href="">菜鸟课堂</a>
<ul class="xiala">
<li><a href="">社区问答</a></li>
<li><a href="">编程词典</a></li>
<li><a href="">手册下载</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="container">
<div class="wrap">
<div class="main">主体部分</div>
</div>
<div class="left">
左边11111111111111111111111111111111111
</div>
<div class="right">
右边
</div>
</div>
<div class="footer">
<div class="footer_content">
<div class="footer_left">
<p style="color:#ccc">PHP中文网：独家原创，永久免费的在线php视频教程，php技术学习阵地！</p>
<p style="color:#ccc">Copyright 2014-2018 http://www.php.cn/ All Rights Reserved | 皖B2-20150071-9</p>
</div>
</div>
</div>
</body>
</html>
下拉框制作的时候主要用到相对定位以及绝对定位的结合使用