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

有几个问题不懂：1二级菜单的li不是应该继承以及菜单里的li ,为什么不是水平的；2jquery实现上滑和下滑时，当鼠标放在二级菜单上是老是不停滑动是什么原因

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>动画标题</title>
</head>
<style type="text/css">
*{
margin:0;
padding: 0;
list-style: none;
}
#nav{
    margin-left: 100px;
    margin-top: 50px;
}
#nav ul li{
    float:left;
    position: relative;
}
#nav ul li a{
display: inline-block;
color:#fff;
text-decoration: none;
height:34px;
width:100px;
text-align: center;
line-height: 34px;
    background-color: #3f240e;
}
#nav ul li a:hover,#nav ul li .on{
color:#000;
background: url(images/slide-pannel_14.png) repeat-x;
}

#nav ul ul{
display: none;
position: absolute;
width:100px;
left:0px;
top:45px;
}
#nav ul ul span{
display: block;
width:17px;
height:11px;
margin-left: 39px;
background: url(images/bird.png) no-repeat;
}
</style>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function(){
    $("li.navList").mousemove(function(){
    $(this).children("ul").slideDown();
    });

    $("li.navList").mouseleave(function(){
    $(this).children("ul").slideUp();
    });
});
</script>
<body>
<div id="nav">
  <ul>
   <li><a href="#">慕课网</a></li>
   <li><a href="#">课程大厅</a>
    <ul>
     <span></span>
        <li><a href="#">JAVASCRIPT</a></li>
     <li><a href="#">JQUERY</a></li>
     <li><a href="#">HTML</a></li>
    </ul>
   </li>
   <li><a href="#">学习中心</a>

   </li>
   <li><a href="#">个人中心</a></li>
   <li><a href="#">关于我们</a></li>
  </ul>
</div>
</body>
</html>

慕田峪6997291

2017-04-24

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

关注问题我要回答

858

操作

收起

1 回答

丹布朗
2017-04-25

 $(function(){
    $("li").mousemove(function(){
      $(this).children("ul").slideDown();
    });
    $("li").children("ul").mouseleave(function(){
      $(this).slideUp();
    });
 });

因为你之前的代码是鼠标离开一级菜单，让他的二级菜单隐藏。应该是鼠标离开二级菜单，让二级菜单隐藏。