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