js實現下拉框
阿新 • • 發佈：2019-05-12
-h ext tle osi 案例 play pla pre center
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding:0; } #nav{/*置父容器高度，寬度，背景顏色，容器水平居中*/ background: #eee; width: 600px; height: 40px; margin: 0 auto; } #nav ul{/*去掉點點*/ list-style: none; } #nav ul li{/*每一個li左浮動形成橫排，高度占滿父容器形成文字垂直居中，文字水平居中*/ float: left; line-height: 40px; text-align: center; position: relative;/*給子ul定位用的*/ } #nav ul li a{/*去下下劃線,變成塊狀繼承父容器高度，左右撐開*/ text-decoration: none; color:#000; padding:0 10px; display: block; } #nav ul li a:hover{ color: #fff; background-color: #666; }#nav ul li ul { position: absolute;/*相對於父li的位置進行定位*/ left: 0; top:40px; display: none; } #nav ul li ul li{ float: none; background-color:#eee; } </style> <!--js代碼--> <script> <!--顯示--> function show(li){ var sub=li.getElementsByTagName("ul")[0]; sub.style.display="block"; } <!--隱藏--> function hide(li){ var sub=li.getElementsByTagName("ul")[0]; sub.style.display="none"; } </script> </head> <body> <div id="nav"> <ul> <li><a href="#">首頁</a></li> <!--onmouseover onmouseout--> <li onmouseover="show(this)" onmouseout="hide(this)"><a href="#">課程大廳</a> <ul> <li><a href="#">Javascript</a></li> <li><a href="#">Jquery</a></li> </ul> </li> <li><a href="#">學習中心</a></li> <li><a href="#">經典案例</a></li> <li onmouseover="show(this)" onmouseout=""><a href="#">關於我們</a> <ul> <li><a href="#">Javascript</a></li> <li><a href="#">Jquery</a></li> </ul> </li> </ul> </div> </body> </html>
在網上找到的，感覺挺有用，備份一下而已。
js實現下拉框