有幾個問題不懂：1二級菜單的li不是應該繼承以及菜單里的li ,為什么不是水平的；2jquery實現上滑和下滑時，當鼠標放在二級菜單上是老是不?；瑒邮鞘裁丛?/h1>
<!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>
<!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>
2017-04-25
?$(function(){ ????$("li").mousemove(function(){ ??????$(this).children("ul").slideDown(); ????}); ????$("li").children("ul").mouseleave(function(){ ??????$(this).slideUp(); ????}); ?});因為你之前的代碼是鼠標離開一級菜單，讓他的二級菜單隱藏。應該是鼠標離開二級菜單，讓二級菜單隱藏。