实现代码：
HTML+CSS：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>三级导航</title> <style type="text/css"> *{margin:0px;padding:0px;} ul li{list-style:none;} #nav{font:14px/28px Microsoft YaHei;padding:0 20px;background:#f6f6f6;border:1px solid #ccc;margin:20px;_zoom:1;white-space:nowrap;} #nav .nav_li{float:left;position:relative;z-index:10;} #nav .nav_li h2{font-size:16px;line-height:35px;padding:0 20px;} #nav .current{border-left:1px solid #ccc;border-right:1px solid #ccc;background:#ddd;position:relative;z-index:30;} #nav .list{position:absolute;top:32px;left:0px;z-index:20;padding:5px;border:1px solid #ccc;background:#ddd;} #nav .list .list_li{position:relative;} #nav .list .list_li p{padding:0 10px;position:relative;z-index:90;} #nav .list .list_li .current{border:1px solid #bbb;border-right:none;background:#ccc;z-index:90;} #nav .child_list{position:absolute;top:0px;left:98px;z-index:20;border:1px solid #bbb;background:#ccc;} #nav .child_list li{padding:0 10px;position:relative;z-index:20;} #nav .list,#nav .child_list{display:none;} </style> </head> <body> <div id="nav"> <ul class="nav_ul"> <li class="nav_li"> <h2><a href="#">菜单1</a></h2> <div class="list"> <ul class="list_ul"> <li class="list_li"> <p>二级子菜单1</p> <div class="child_list"> <ul> <li><a href="#">三级子菜单1</a></li> <li><a href="#">三级子菜单2</a></li> <li><a href="#">三级子菜单3</a></li> <li><a href="#">三级子菜单4</a></li> <li><a href="#">三级子菜单5</a></li> </ul> </div> </li> <li class="list_li"> <p>二级子菜单2</p> <div class="child_list"> <ul> <li><a href="#">三级子菜单1</a></li> <li><a href="#">三级子菜单2</a></li> <li><a href="#">三级子菜单3</a></li> <li><a href="#">三级子菜单4</a></li> <li><a href="#">三级子菜单5</a></li> </ul> </div> </li> <li class="list_li"> <p>二级子菜单3</p> <div class="child_list"> <ul> <li><a href="#">三级子菜单1</a></li> <li><a href="#">三级子菜单2</a></li> <li><a href="#">三级子菜单3</a></li> <li><a href="#">三级子菜单4</a></li> <li><a href="#">三级子菜单5</a></li> </ul> </div> </li> <li class="list_li"> <p>二级子菜单4</p> <div class="child_list"> <ul> <li><a href="#">三级子菜单1</a></li> <li><a href="#">三级子菜单2</a></li> <li><a href="#">三级子菜单3</a></li> <li><a href="#">三级子菜单4</a></li> <li><a href="#">三级子菜单5</a></li> </ul> </div> </li> </ul> </div> </li> <li class="nav_li"> <h2><a href="#">菜单2</a></h2> <div class="list"> <ul class="list_ul"> <li class="list_li"> <p>二级子菜单1</p> <div class="child_list"> <ul> <li><a href="#">三级子菜单1</a></li> <li><a href="#">三级子菜单2</a></li> <li><a href="#">三级子菜单3</a></li> <li><a href="#">三级子菜单4</a></li> <li><a href="#">三级子菜单5</a></li> </ul> </div> </li> <li class="list_li"> <p>二级子菜单2</p> <div class="child_list"> <ul> <li><a href="#">三级子菜单1</a></li> <li><a href="#">三级子菜单2</a></li> <li><a href="#">三级子菜单3</a></li> <li><a href="#">三级子菜单4</a></li> <li><a href="#">三级子菜单5</a></li> </ul> </div> </li> <li class="list_li"> <p>二级子菜单3</p> <div class="child_list"> <ul> <li><a href="#">三级子菜单1</a></li> <li><a href="#">三级子菜单2</a></li> <li><a href="#">三级子菜单3</a></li> <li><a href="#">三级子菜单4</a></li> <li><a href="#">三级子菜单5</a></li> </ul> </div> </li> <li class="list_li"> <p>二级子菜单4</p> <div class="child_list"> <ul> <li><a href="#">三级子菜单1</a></li> <li><a href="#">三级子菜单2</a></li> <li><a href="#">三级子菜单3</a></li> <li><a href="#">三级子菜单4</a></li> <li><a href="#">三级子菜单5</a></li> </ul> </div> </li> </ul> </div> </li> <li class="nav_li"> <h2><a href="#">菜单3</a></h2> <div class="list"> <ul class="list_ul"> <li class="list_li"> <p>二级子菜单1</p> <div class="child_list"> <ul> <li><a href="#">三级子菜单1</a></li> <li><a href="#">三级子菜单2</a></li> <li><a href="#">三级子菜单3</a></li> <li><a href="#">三级子菜单4</a></li> <li><a href="#">三级子菜单5</a></li> </ul> </div> </li> <li class="list_li"> <p>二级子菜单2</p> <div class="child_list"> <ul> <li><a href="#">三级子菜单1</a></li> <li><a href="#">三级子菜单2</a></li> <li><a href="#">三级子菜单3</a></li> <li><a href="#">三级子菜单4</a></li> <li><a href="#">三级子菜单5</a></li> </ul> </div> </li> <li class="list_li"> <p>二级子菜单3</p> <div class="child_list"> <ul> <li><a href="#">三级子菜单1</a></li> <li><a href="#">三级子菜单2</a></li> <li><a href="#">三级子菜单3</a></li> <li><a href="#">三级子菜单4</a></li> <li><a href="#">三级子菜单5</a></li> </ul> </div> </li> <li class="list_li"> <p>二级子菜单4</p> <div class="child_list"> <ul> <li><a href="#">三级子菜单1</a></li> <li><a href="#">三级子菜单2</a></li> <li><a href="#">三级子菜单3</a></li> <li><a href="#">三级子菜单4</a></li> <li><a href="#">三级子菜单5</a></li> </ul> </div> </li> </ul> </div> </li> <li class="nav_li"> <h2><a href="#">菜单4</a></h2> <div class="list"> <ul class="list_ul"> <li class="list_li"> <p>二级子菜单1</p> <div class="child_list"> <ul> <li><a href="#">三级子菜单1</a></li> <li><a href="#">三级子菜单2</a></li> <li><a href="#">三级子菜单3</a></li> <li><a href="#">三级子菜单4</a></li> <li><a href="#">三级子菜单5</a></li> </ul> </div> </li> <li class="list_li"> <p>二级子菜单2</p> <div class="child_list"> <ul> <li><a href="#">三级子菜单1</a></li> <li><a href="#">三级子菜单2</a></li> <li><a href="#">三级子菜单3</a></li> <li><a href="#">三级子菜单4</a></li> <li><a href="#">三级子菜单5</a></li> </ul> </div> </li> <li class="list_li"> <p>二级子菜单3</p> <div class="child_list"> <ul> <li><a href="#">三级子菜单1</a></li> <li><a href="#">三级子菜单2</a></li> <li><a href="#">三级子菜单3</a></li> <li><a href="#">三级子菜单4</a></li> <li><a href="#">三级子菜单5</a></li> </ul> </div> </li> <li class="list_li"> <p>二级子菜单4</p> <div class="child_list"> <ul> <li><a href="#">三级子菜单1</a></li> <li><a href="#">三级子菜单2</a></li> <li><a href="#">三级子菜单3</a></li> <li><a href="#">三级子菜单4</a></li> <li><a href="#">三级子菜单5</a></li> </ul> </div> </li> </ul> </div> </li> </ul> <div style="clear:both;"></div> </div> </body> </html>
JS:
<script type="text/javascript"> window.onload = function () { var oDiv = document.getElementById("nav"); var oLi = oDiv.getElementsByTagName("li"); for (var i = 0; i < oLi.length; i++) { if (oLi[i].className == "nav_li") { oLi[i].onmouseover = function () { var aDiv = this.getElementsByTagName("div")[0]; var aH2 = this.getElementsByTagName("h2")[0]; aDiv.style.display = "block"; aH2.className = "current"; } oLi[i].onmouseout = function () { var aDiv = this.getElementsByTagName("div")[0]; var aH2 = this.getElementsByTagName("h2")[0]; aDiv.style.display = "none"; aH2.className = ""; } } else if (oLi[i].className == "list_li") { oLi[i].onmouseover = function () { var aDiv = this.getElementsByTagName("div")[0]; var aP = this.getElementsByTagName("p")[0]; aDiv.style.display = "block"; aP.className = "current"; } oLi[i].onmouseout = function () { var aDiv = this.getElementsByTagName("div")[0]; var aP = this.getElementsByTagName("p")[0]; aDiv.style.display = "none"; aP.className = ""; } } } } </script>
效果如下图所示：
