<!DOCTYPE html><html ><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>erjidaohang</title> <link rel="stylesheet" href="erjidaohang.css"> <script> window.onload=function () { var oUl=document.getElementById('ul1'); var aLi=oUl.children;/*请注意子节点只算第一层的，孙子节点不在子节点的范畴内。*/ for (var i=0;i<aLi.length;i++){ aLi[i].onmouseover=function () { var oSubUl=this.getElementsByTagName('ul')[0]; if (oSubUl){ oSubUl.style.display="block"; } }; /*在鼠标指针移出指定的对象时执行Javascript代码:*/ aLi[i].onmouseout=function () { var oSubul=this.getElementsByTagName('ul')[0]; if (oSubul){ oSubul.style.display="none"; } }; } }; </script></head><body> <div class="box"> <ul class="nav" id="ul1"> <li><a href="#">page1</a></li> <li> <a href="#">page2</a> <ul> <li><a href="#">item2</a></li> <li><a href="#">item2</a></li> <li><a href="#">item2</a></li> <li><a href="#">item2</a></li> </ul> </li> <li><a href="#">page3</a> <ul> <li><a href="#">item3</a></li> <li><a href="#">item3</a></li> <li><a href="#">item3</a></li> <li><a href="#">item3</a></li> </ul> </li> <li><a href="#">page4</a></li> </ul> </div></body>CSS:
*{ margin: 0px; padding: 0px; list-style: none; text-decoration: none;}.box{ width: 405px; margin: 50px auto;}.box .nav{ margin-left: -1px;}.nav:after{ display: table; content: ""; clear: both; /*清除左右浮动的影响*/}.nav>li{ float: left; width: 100px; margin-left: 1px; /*排除边界的影响*/}/*ransition-property是用来指定当元素其中一个属性改变时执行transition效果，其中none没有属性改变；all所有属性都改变，它也是默认值；indent元素属性名，其对应的类型如下：*/.nav a{ display: block; width: 100%; height: 100%; text-align: center; border: 1px solid #000000; color: #000000; transition: .1s all ease;}.nav a:hover{ background-color: #eee; color: #fff;}.nav li{ height: 30px ; line-height: 30px;}.nav ul{ display:none ; margin-top: -2px;}.nav ul li{ margin-top: 1px;}.active ul{ display: block;}
