                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /形形色色的下拉菜单

二级菜单出现速度快，且无法隐藏

<!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>

啊咧123

2017-03-09

源自：形形色色的下拉菜单 6-3

关注问题我要回答

450

操作

收起

1 回答

Char_n
2017-03-14

<body>
<ul>
    <li><a href="#"><span>首页</span></a></li>
    <li><a href="#">分类</a>
        <ul><!-- 给这里加一个id -->
            <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>

给ul添加一个id，楼主可以试着打开调试器看网页的报错。

希望能帮到你。