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

• MENU
• MENU

• menu
• menu
• menu

• MENU
• MENU

测试是否成功清除浮动