<style type="text/css">
* { margin: 0px; padding: 0px; font-family: "微软雅黑"; }
#top1{ width:100%px; height:40px; background-color:#9C9; }
#top2{ height:40px; width:400px; margin:0px auto; }
#nav-top { height: 40px; width: 400px; background-color: #1abc9c; color: white; border-radius: 5px; float:left; }
li { color: black; list-style: none; background-color: #ecf0ff; }
.nav-btn { width: 100px; float: left; line-height: 40px; text-align: center; overflow: hidden; border-radius: 5px; max-height: 40px; } li:hover{ background-color: #1ABC9C; }
.nav-btn:hover{ background-color: cornflowerblue; cursor: pointer; max-height: 500px; transition: 1s; }
</style>
<body>
<div id="top1">
<div id="top2">
<div id="nav-top">
<div class="nav-btn">1
<ul>
<li>111</li><li>222</li><li>333</li>
</ul>
</div>
<div class="nav-btn">2
<ul>
<li>222</li><li>333</li><li>444</li>
</ul>
</div>
</div>
</div>
</div>
</body>