<style type="text/css">
* {
margin: 0px;
padding: 0px;
list-style: none;
}
.top-container{100%;
height:70px;
background-color: #909;}
.top1{80%;
height:70px;
background-color: #F00;
margin:0px auto;}
.top2{25%;
max-height:70px;
background-color:#0F0;
float:left;
text-align:center;
line-height: 80px;
overflow: hidden;
}
.top2:hover{ background-color: #F00;
max-height: 400px;
transition: 0.5s;}
.top2 li:hover{background-color: #090;}
</style>
<body>
<div class="top-container">
<div class="top1">
<div class="top2">花
<ul>
<li>水仙</li>
<li>牡丹</li>
<li>百合</li>
<li>玫瑰</li>
</ul>
</div>
<div class="top2">水果
<ul>
<li>苹果</li>
<li>草莓</li>
<li>香蕉</li>
<li>西瓜</li>
</ul>
</div>
<div class="top2">蔬菜
<ul>
<li>白菜</li>
<li>土豆</li>
<li>萝卜</li>
<li>青菜</li>
</ul>
</div>
<div class="top2">服装
<ul>
<li>外套</li>
<li>毛衣</li>
<li>裤子</li>
<li>衬衣</li>
</ul>
</div>
</div>
</div>