## css下拉栏的几种设计 >### 方式一： **原理：设置导航栏高度，隐藏其超出部分** 效果如图：  >#### html代码： ``` <div class="box"> <ul> <li>this is 1</li> <li>this is 2</li> <li>this is 3</li> <li>this is 4</li> <li>this is 5</li> </ul> </div> ``` >#### css代码： ``` * { margin: 0; padding: 0; } .box { width: 200px; height: 50px; /*导航条高度设置成50px*/ margin: 40px; overflow: hidden; /*超出导航条部分隐藏*/ cursor: pointer; transition: all 0.35s; /*设置动画时间*/ } .box ul { list-style: none; padding: 0; } .box ul li { width: 200px; height: 50px; line-height: 50px; text-align: center; background: black; color: white; } .box:hover{ height: 250px; } .box ul:hover :first-child { background: gray; } .box ul li:hover { background: gray; } ``` >## 方式二 **原理 ：js控制元素隐藏显示** 效果如图：  > html代码 ``` <ul class="row"> <li><a href="#">电脑</a></li> <li class="drop"> <a href="#" id="test">手机</a> <div class="drop-content none" id="drop_content"> <a href="">小米</a> <a href="">华为</a> <a href="">苹果</a> </div> </li> <li><a href="#">平板</a></li> </ul> ``` >css代码 ``` * { margin: 0; padding: 0; } ul { line-height: 50px; list-style: none; } .row::after { content: ""; display: table; clear: both; } li { float: left; text-align: center; } a { display: inline-block; width: 100px; background-color: aqua; text-decoration: none; color: black; } a:hover { background-color: cadetblue; } .drop { position: relative; } .drop-content { position: absolute; } .none{ display: none; } ``` >javascript代码 ``` <script> var test = document.getElementById("test"); var dropContent = document.getElementById("drop_content"); test.onclick = function(event){ dropContent.classList.toggle("none"); //移除掉class"none" event.preventDefault(); } </script> ```