day07
2017-07-24 本文已影响0人
AnnQi
A:今天学到的内容
一、实现下拉菜单(运用float,position)
<style>
*{margin: 0;padding: 0}
ul{list-style: none;}
li{float: left;}
.navBox{background-color: pink}
.nav{
margin-right: auto;margin-left: auto;
width: 1000px;text-align: center;line-height: 50px;
}
.nav:after{
content: "";
display: table;
clear: both;
}
.nav a{
text-decoration: none;
display: block;
width: 120px;
}
.menu{
position: relative;
}
.content{
position: absolute;
display: none;
background-color: palevioletred;
}
.menu:hover .content{
display: block;
}
.nav a:hover{
background-color: gainsboro;
}
</style>
<div class="navBox">
<ul class="nav">
<li class="menu">
<a href="">收藏夹</a>
<div class="content">
<a href="">我的宝贝</a>
<a href="">收藏的宝贝</a>
</div>
</li>
<li><a href="">卖家中心</a></li>
<li><a href="">联系我们</a></li>
<li><a href="">商城</a></li>
</ul>
</div>
B:学会了什么
一、实现下拉菜单(运用float,position)