利用display： none和display：block；
CSS：
ul{8list-style:none;9}
.nav>li{float:left;}
ul a{display:block;
text-decoration:none;
width:100px;
height:50px;
text-align:center;
line-height:50px;
color:white;
background-color:#2f3e45;
}
.nav>li:first-child a{
border-radius:10px 0 0 10px;
}
.nav>li:last-child a{
border-radius:0 10px 10px 0;}
.drop-down{position: relative;}
.drop-down-content{padding:0;display:none;
position: absolute;}
h3{font-size:30px;
clear:both;}
.drop-down-content li:hover a{
background-color:red;
}
.nav .drop-down:hover .drop-down-content{
display:block;
}
html：
<ul class="nav">
<li ><a href="#">MENU</li>
<li class="drop-down"><a href="#">MENU</li>
<ul class="drop-down-content">
<li><a href="#">menu</a></li>
<li><a href="#">menu</a></li>
</ul>
<li><a href="#">MENU</a></li>
<li><a href="#">MENU</a></a>
</ul>
<h3>测试是否成功清除浮动</h3>
