<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body, html { background: #ccc; } * { margin: 0; padding: 0; } ul li { list-style-type: none; } #nav { width: 500px; margin: 10px auto; padding: 3px; } #nav ul>li { width: 100px; background: deepskyblue; float: left; text-align: center; margin-left: 5px; } #nav ul:after { content: ""; display: block; clear: both; } .list { display: none; } .child-list { display: none; position: relative; } .child-list ul { position: absolute; display: block; left: 100%; margin-top: -15%; margin-left: -5px; } </style> <script> window.onload = function() { var oDiv = document.getElementById(‘nav‘); var aLi = oDiv.getElementsByTagName(‘li‘); var i = 0; for (i = 0; i < aLi.length; i++) { if (aLi[i].className == ‘nav-li‘) { aLi[i].onmouseover = function() { var oDivList = this.getElementsByTagName(‘div‘)[0]; oDivList.style.display = ‘block‘; } aLi[i].onmouseout = function() { var oDivList = this.getElementsByTagName(‘div‘)[0]; oDivList.style.display = ‘none‘; } } else if (aLi[i].className == ‘list-li‘) { aLi[i].onmouseover = function() { //alert(‘aaa‘); var oDiv = this.getElementsByTagName(‘div‘)[0]; oDiv.style.display = ‘block‘; } aLi[i].onmouseout = function() { var oDiv = this.getElementsByTagName(‘div‘)[0]; oDiv.style.display = ‘none‘; } } } } </script> </head> <body> <div id="nav"> <ul class="nav-ul"> <li class="nav-li"> <h2>栏目一</h2> <div class="list"> <ul class=list-ul> <li class="list-li"> <p>列表一</p> <div class="child-list"> <ul> <li>子列表一</li> <li>子列表二</li> <li>子列表三</li> </ul> </div> </li> <li class="list-li"> <p>列表二</p> <div class="child-list"> <ul> <li>子列表四</li> <li>子列表五</li> <li>子列表六</li> </ul> </div> </li> <li class="list-li"> <p>列表三</p> <div class="child-list"> <ul> <li>子列表一</li> <li>子列表二</li> <li>子列表三</li> </ul> </div> </li> </ul> </div> </li> <li class="nav-li"> <h2>栏目二</h2> <div class="list"> <ul class=list-ul> <li class="list-li"> <p>列表一</p> <div class="child-list"> <ul> <li>子列表一</li> <li>子列表二</li> <li>子列表三</li> </ul> </div> </li> <li class="list-li"> <p>列表二</p> <div class="child-list"> <ul> <li>子列表一</li> <li>子列表二</li> <li>子列表三</li> </ul> </div> </li> <li class="list-li"> <p>列表三</p> <div class="child-list"> <ul> <li>子列表一</li> <li>子列表二</li> <li>子列表三</li> </ul> </div> </li> </ul> </div> </li> <li class="nav-li"> <h2>栏目三</h2> <div class="list"> <ul class=list-ul> <li class="list-li"> <p>列表一</p> <div class="child-list"> <ul> <li>子列表一</li> <li>子列表二</li> <li>子列表三</li> </ul> </div> </li> <li class="list-li"> <p>列表二</p> <div class="child-list"> <ul> <li>子列表一</li> <li>子列表二</li> <li>子列表三</li> </ul> </div> </li> <li class="list-li"> <p>列表三</p> <div class="child-list"> <ul> <li>子列表一</li> <li>子列表二</li> <li>子列表三</li> </ul> </div> </li> </ul> </div> </li> </ul> </div> </body> </html>
原文：http://www.cnblogs.com/Mr-W/p/6322240.html