二級菜單出現速度快,且無法隱藏
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin:0;padding:0;}
.submenu{font-weight:bold;font-size:18px;}
.submenu ul{list-style:none;display:none;padding:0;position:absolute;}
.submenu li{float:left;margin-right:1px;list-style:none;}
.submenu li a{text-decoration:none;color:#fff;line-height:30px;display:block;background-color:#3f240e;width:90px;text-align:center;}
.submenu li a:hover{color:#fff;background-color:#24a124;background:url(images/slide-pannel_14.png)repeat-x;}
.note{background:url(images/slide-pannel_14.png)repeat-x;display:block;color:#3f240e;}
.corner{display:block;background:url(images/bird.png)31px no-repeat;height:11px;}
</style>
<script type="text/javascript">
?? ?window.onload = function(){
?? ??? ?var Lis = document.getElementsByTagName("li");
?? ??? ?for(var i = 0;i<Lis.length;i++){
?? ??? ??? ?Lis[i].onmouseover = function(){
?? ??? ??? ??? ?var u = this.getElementsByTagName('ul')[0];
?? ??? ??? ??? ?if (u != undefined ) {
?? ??? ??? ??? ??? ?u.style.display = "block";
?? ??? ??? ??? ??? ?ChangeH(u.id,1);
?? ??? ??? ??? ?}
?? ??? ??? ?}
?? ??? ??? ?Lis[i].onmouseleave = function(){
?? ??? ??? ??? ?var u = this.getElementsByTagName('ul')[0];
?? ??? ??? ??? ?if (u != undefined ) {
?? ??? ??? ??? ??? ?ChangeH(u.id,-1);
?? ??? ??? ??? ?}
?? ??? ??? ?}
?? ??? ?}
?? ??? ?function ChangeH(id,count){
?? ??? ??? ?var uList = document.getElementById(id);
?? ??? ??? ?var h = uList.offsetHeight;
?? ??? ??? ?h += count;
?? ??? ??? ?if(count > 0){
?? ??? ??? ??? ?if(h <= 42){
?? ??? ??? ??? ?uList.style.height = h + "px";
?? ??? ??? ??? ?setTimeout("ChangeH('"+ id +"',1)",20);
?? ??? ??? ??? ?}else{
?? ??? ??? ??? ??? ?return ;
?? ??? ??? ??? ?}
?? ??? ??? ?}else{
?? ??? ??? ??? ?if(h > 0){
?? ??? ??? ??? ?uList.style.height = h + "px";
?? ??? ??? ??? ?setTimeout("ChangeH('"+ id +"',-1)",20);
?? ??? ??? ??? ?}else{
?? ??? ??? ??? ??? ?uList.style.display = "none";
?? ??? ??? ??? ??? ?return ;
?? ??? ??? ??? ?}
?? ??? ??? ?}
?? ??? ?}
?? ?}
</script>
</head>
<body>
<ul>
?? ?<li><a href="#"><span>首頁</span></a></li>
?? ?<li><a href="#">分類</a>
?? ??? ?<ul>
?? ??? ??? ?<span></span>
?? ??? ??? ?<li><a href="#">家用電器</a></li>
?? ??? ??? ?<li><a href="#">家具</a></li>
?? ??? ??? ?<li><a href="#">生活用品</a></li>
?? ??? ?</ul>
?? ?</li>
?? ?<li><a href="#">關于我們</a></li>
</ul>?? ??? ?
</body>
</html>
2017-03-14
給ul添加一個id,樓主可以試著打開調試器看網頁的報錯。
希望能幫到你。