js代码如下:
window.onload = function Xiala() { var oNav = document.getElementById("nav"); var oLi = oNav.getElementsByTagName("li"); var i = 0; for (i = 0; i < oLi.length; i++) { oLi[i].onmouseover = function() { var oHeight = this.getElementsByTagName("div")[0].scrollHeight; this.className = "active"; shownav(this, oHeight); }; oLi[i].onmouseout = function() { this.className = " "; shownav(this, 0); }; }; }; function shownav(obj, n) { var oDiv = obj.getElementsByTagName("div")[0]; var aA = obj.getElementsByTagName("a"); clearInterval(obj.timer); obj.timer = setInterval(function() { if (n == oDiv.offsetHeight) { clearInterval(obj.timer); obj.timer = null; } else { var iHeight = (n - oDiv.offsetHeight) / 10; iHeight = iHeight > 0 ? Math.ceil(iHeight) : Math.floor(iHeight); oDiv.style.height = (oDiv.offsetHeight + iHeight) + "px"; } }, 5); <!--修改数字改变下拉速度--> }
<ul id="nav">
<li>
<a href="#">本网首页</a>
</li>
<li>
第一个
<div class="box div">
<a href="#">测试一下</a>
<a href="#">测试一下</a>
<a href="#">测试一下</a>
<a href="#">测试一下</a>
</div>
</li>
<li>
第二个
<div class="box">
<a href="#">测试一下</a>
<a href="#">测试一下</a>
</div>
</li>
<li>
<a href="#">第三个</a>
</li>
</ul>