學習前端也有一會兒了，教大家一個非常簡單的純JS導航，話不多說看代碼
CSS
1 <style> 2 *{ margin: 0; padding: 0; list-style: none; } 3 .nav { width: 430px; height: 40px; background: skyblue; margin: 100px auto; text-align: center; line-height: 40px; } 4 a { color: #fff; text-decoration: none; } 5 .nav li { width: 100px; height: 40px; background: skyblue; } 6 .nav>li { float: left; margin-right: 10px; } 7 .nav>li:last-child { margin-right: 0; } 8 .nav li ul { position: absolute; height: 0; overflow: hidden; transition: height 0.5s; } 9 </style>
JavaScript
1 <script> 2 function nav(liID,ulID) { 3 var oLi = document.getElementById(liID); 4 var oUl = document.getElementById(ulID); 5 6 oLi.onmouseover = function () { 7 oUl.style.height = '130px'; 8 }; 9 oLi.onmouseout = function () { 10 oUl.style.height = '0'; 11 } 12 } 13 nav('li1','ul1'); 14 nav('li2','ul2'); 15 nav('li3','ul3'); 16 </script>
HTML
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <ul class="nav"> 9 <li> 10 <a href="#">首頁</a> 11 </li> 12 <li id="li1"> 13 <a href="#">首頁</a> 14 <ul id="ul1"> 15 <li><a href="#" >界面設計</a></li> 16 <li><a href="#" >界面設計</a></li> 17 <li><a href="#" >界面設計</a></li> 18 </ul> 19 </li> 20 <li id="li2"> 21 <a href="#">首頁</a> 22 <ul id="ul2"> 23 <li><a href="#" >界面設計</a></li> 24 <li><a href="#" >界面設計</a></li> 25 <li><a href="#" >界面設計</a></li> 26 </ul> 27 </li> 28 <li id="li3"> 29 <a href="#">首頁</a> 30 <ul id="ul3"> 31 <li><a href="#" >界面設計</a></li> 32 <li><a href="#" >界面設計</a></li> 33 <li><a href="#" >界面設計</a></li> 34 </ul> 35 </li> 36 </ul> 37 </body> 38 </html>