<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>动画菜单</title> <style type="text/css"> *{ margin: 0; padding: 0; } ul { list-style: none; } .nav{ width: 800px; height: 60px; margin: 50px auto; } .nav li { float: left; background: #ad3456; height: 60px; position: relative; } .nav li a { line-height: 60px; font-size: 16px; color: #fff; font-weight: normal; text-align: center; text-decoration: none; display: block; width: 90px; } .nav li a:hover { background: #bb8888; color: #ff5555; } #sub { position: absolute; left: 0; top: 60px; display: block; height: 0; overflow: hidden; } #sub li { float: none; } </style><script type="text/javascript"> window.onload = function() { var oli = document.getElementsByTagName('li'); for(var i = 0, length1 = oli.length; i < length1; i++){ oli[i].onmouseover = function () { var ul = this.getElementsByTagName('ul')[0]; if(ul) { ul.style.display = "block"; starMove(ul); } }; } }; function starMove (obj) { var Het = obj.offsetHeight; if(Het<180){ obj.style.height = Het + 10 + 'px'; setTimeout("starMove('"+obj+"')", 10); } else{ return; } } </script></head><body> <ul class="nav"> <li><a href="#">首页</a></li> <li><a href="#">前端课程</a> <ul id="sub"> <li><a href="">HTML/CSS</a></li> <li><a href="">JavaScript</a></li> <li><a href="">JQuery</a></li> </ul> </li> <li><a href="#">案例中心</a></li> <li><a href="#">关于我们</a></li> </ul></body></html>
添加回答
举报
0/150
提交
取消