用CSS实现下拉菜单的效果01

利用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>

<li><a href="#">menu</a></li>

</ul>

<li><a href="#">MENU</a></li>

<li><a href="#">MENU</a></a>

</ul>

<h3>测试是否成功清除浮动</h3>