13 用Css做下拉菜单

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