<html> <head> <meta charset="utf-8"> <title>導航欄下拉菜單</title> <style type="text/css"> *{ margin:0 auto; padding:0;} #nav{ width:800px; height:50px; margin-top:50px;} .menu{ width:100px; height:50px; background-color:#09F; float:left; margin-right:5px; text-align:center; line-height:50px; color:#fff;} .zhan{ width:0px; height:0px; float:left; position:relative;top:50px; left:-105px; display:none;} .xl{ width:100px; height:200px; background-color:#00F;} .menu:hover{ cursor:pointer; background-color:#00F;} .xl:hover{ cursor:pointer;} </style> </head> <body> <div id="nav"> <div class="menu">首頁</div> <div class="zhan"> <div class="xl"></div> </div> <div class="menu">產品中心</div> <div class="zhan"> <div class="xl"></div> </div> <div class="menu">新聞動態</div> <div class="zhan"> <div class="xl"></div> </div> <div class="menu">行業動態</div> <div class="zhan"> <div class="xl"></div> </div> <div class="menu">關於我們</div> <div class="zhan"> <div class="xl"></div> </div> </div> </body> </html> <script type="text/javascript"> var menu = document.getElementsByClassName("menu"); var zhan = document.getElementsByClassName("zhan"); /* 鼠標移入主菜單顯示相應的下拉子菜單，並且其他的子菜單隱藏 */ for(var i=0;i<menu.length;i++) { menu[i].onmouseover = function() { for(var i=0;i<zhan.length;i++) { zhan[i].style.display = "none"; } this.nextSibling.nextSibling.style.display = "block";//取下下個兄弟節點，換行算一個節點 } } /* 鼠標移出主菜單，所有子菜單隱藏 */ for(var i=0;i<menu.length;i++) { menu[i].onmouseout = function() { for(var i=0;i<zhan.length;i++) { zhan[i].style.display = "none"; } } } /* 鼠標移入子菜單，子菜單依然顯示 */ for(var i=0;i<zhan.length;i++) { zhan[i].onmouseover = function() { this.style.display = "block"; } } /* 鼠標移出子菜單，子菜單隱藏 */ for(var i=0;i<zhan.length;i++) { zhan[i].onmouseout = function() { this.style.display = "none"; } } </script>
移入主菜單顯示相應子菜單
移入子菜單