Javascript 子菜单消失

在JQuery的帮助下，我有一个子菜单，但是当我离开我的主LI转到子菜单时，子菜单消失了。根据我的研究，我看到很多时候这是一个CSS，但我看不出我的CSS有任何问题。我唯一想知道的另一件事是，如果悬停功能不是正确的选择？请看一看

以下是我对相关部分的CSS和JavaScript：

<script>
$(document).ready(function () {
    $('.nav #about').hover(function (e) {
        $('.nav2').slideDown('normal');
    }, function () {
        $('.nav2').slideUp('normal');
    });
});
</script>


#wrapper
{
margin:9% 10% 1% 10%;
height:40em;
border: solid 3px black;
background-color:#B2B2D9;
overflow:hidden
}           /* Allows inner div to expand to full height of WRAPPER div */



#main
{
height:100%;
background-color:white;
margin-right:2%;
margin-bottom:20%;
margin-left:15%;
padding-top:1em;
padding-left:2em;
}


#col1
{
background-color:#000033;
width:15%;
height:100%;
float:left;
color:#FFF000;
font-family: bold;
font-size: 100%;
padding:0;
}


ul.nav li 
{
position:relative;
width:100%;
}

ul.nav a
{
display: block;
background-color:#B2B2D9;
margin-right:2%;
margin-bottom:1%;
margin-left:1%;
text-decoration:none;
border-top-color:#FFFFFF;
border-right-color:#E6E6E6;
border-bottom-color:#FFFFFF;
border-left-color:#E6E6E6;
border-top-width: 3%;
border-right-width: 3%;
border-bottom-width: 3%;
border-left-width: 3%;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
padding: 2%;
}


ul.nav
{
position:relative;
width:100%;
list-style-type: none;
line-height:1.5em;
padding:0px;
}

ul.nav2 a
{
display: block;
background-color:#000033;
padding:6%; 
margin:0;
text-decoration:none;
color:white;
border-top-color:#FFFFFF;    
border-right-color:#E6E6E6;
border-bottom-color:#FFFFFF;
border-left-color:#E6E6E6;
}


ul.nav2
{
position:absolute;
top:0;
left:100%;
display:none;
font-size:100%;
list-style-type: none;
width:7em;
line-height:1.5em;
padding:0px;
}

ul.nav2 li
{ 
line-height:1.3em;
}

<div id="col1">

<ul class="nav">
<li><a href="http://www.alan.com">Home</a></li>
<li><a id="about" href="http://www.alan.com">About</a>

  <ul class="nav2">
  <li><a href="bio.html">Bio</a></li>
  <li><a href="edu.html">Education</a></li>
  </ul>

</li>

<li><a href="http://www.alan.com">New Listings</a></li>
<li><a href="http://www.alan.com">Featured Home</a></li>
<li><a href="http://www.alan.com">Town Facts</a></li>
<li><a href="http://www.alan.com">Contact Me</a></li>
</ul>


</div>


<div id="main">
"Lorem ipsum dolor sit amet, consectetur adipisicing elit
</div>

$（文档）.ready（函数（）{
$（'.nav#about'）.hover（函数（e）{
$（'.nav2'）。向下滑动（'normal'）；
}，函数（）{
$（'.nav2'）.slideUp（'normal'）；
});
});
#包装纸
{
利润率：9%10%1%10%；
高度：40公分；
边框：纯色3px黑色；
背景色：#B2B2D9；
溢出：隐藏
}/*允许内部div扩展到包装div的全高*/
#主要
{
身高：100%；
背景色：白色；
保证金权利：2%；
利润底部：20%；
左边距：15%；
垫面：1米；
左：2米；
}
#可乐
{
背景色：#000033；
宽度：15%；
身高：100%；
浮动：左；
颜色：#FFF000；
字体系列：粗体；
字体大小：100%；
填充：0；
}
李国宝
{
位置：相对位置；
宽度：100%；
}
导航a
{
显示：块；
背景色：#B2B2D9；
保证金权利：2%；
利润底部：1%；
左缘：1%；
文字装饰：无；
边框顶部颜色：#FFFFFF；
右边框颜色：#e6；
边框底色：#FFFFFF；
左边框颜色：#e6；
边框顶部宽度：3%；
右边界宽度：3%；
底边宽度：3%；
左边框宽度：3%；
边框顶部样式：实心；
右边框样式：实心；
边框底部样式：实心；
左边框样式：实心；
填充：2%；
}
ul导航
{
位置：相对位置；
宽度：100%；
列表样式类型：无；
线高：1.5em；
填充：0px；
}
ul.nav2 a
{
显示：块；
背景色：#000033；
填充：6%；
保证金：0；
文字装饰：无；
颜色：白色；
边框顶部颜色：#FFFFFF；
右边框颜色：#e6；
边框底色：#FFFFFF；
左边框颜色：#e6；
}
ul.nav2
{
位置：绝对位置；
排名：0；
左：100%；
显示：无；
字体大小：100%；
列表样式类型：无；
宽度：7em；
线高：1.5em；
填充：0px；
}
ul.nav2 li
{ 
线高：1.3em；
}

以下是有关页面的部分：

<script>
$(document).ready(function () {
    $('.nav #about').hover(function (e) {
        $('.nav2').slideDown('normal');
    }, function () {
        $('.nav2').slideUp('normal');
    });
});
</script>


#wrapper
{
margin:9% 10% 1% 10%;
height:40em;
border: solid 3px black;
background-color:#B2B2D9;
overflow:hidden
}           /* Allows inner div to expand to full height of WRAPPER div */



#main
{
height:100%;
background-color:white;
margin-right:2%;
margin-bottom:20%;
margin-left:15%;
padding-top:1em;
padding-left:2em;
}


#col1
{
background-color:#000033;
width:15%;
height:100%;
float:left;
color:#FFF000;
font-family: bold;
font-size: 100%;
padding:0;
}


ul.nav li 
{
position:relative;
width:100%;
}

ul.nav a
{
display: block;
background-color:#B2B2D9;
margin-right:2%;
margin-bottom:1%;
margin-left:1%;
text-decoration:none;
border-top-color:#FFFFFF;
border-right-color:#E6E6E6;
border-bottom-color:#FFFFFF;
border-left-color:#E6E6E6;
border-top-width: 3%;
border-right-width: 3%;
border-bottom-width: 3%;
border-left-width: 3%;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
padding: 2%;
}


ul.nav
{
position:relative;
width:100%;
list-style-type: none;
line-height:1.5em;
padding:0px;
}

ul.nav2 a
{
display: block;
background-color:#000033;
padding:6%; 
margin:0;
text-decoration:none;
color:white;
border-top-color:#FFFFFF;    
border-right-color:#E6E6E6;
border-bottom-color:#FFFFFF;
border-left-color:#E6E6E6;
}


ul.nav2
{
position:absolute;
top:0;
left:100%;
display:none;
font-size:100%;
list-style-type: none;
width:7em;
line-height:1.5em;
padding:0px;
}

ul.nav2 li
{ 
line-height:1.3em;
}

<div id="col1">

<ul class="nav">
<li><a href="http://www.alan.com">Home</a></li>
<li><a id="about" href="http://www.alan.com">About</a>

  <ul class="nav2">
  <li><a href="bio.html">Bio</a></li>
  <li><a href="edu.html">Education</a></li>
  </ul>

</li>

<li><a href="http://www.alan.com">New Listings</a></li>
<li><a href="http://www.alan.com">Featured Home</a></li>
<li><a href="http://www.alan.com">Town Facts</a></li>
<li><a href="http://www.alan.com">Contact Me</a></li>
</ul>


</div>


<div id="main">
"Lorem ipsum dolor sit amet, consectetur adipisicing elit
</div>

“Lorem ipsum Door sit amet，奉献精英

如果您将

id=“about”

移动到

元素，它的工作方式应该与您期望的更接近（
是您的子菜单容器，而不是

您可以创建一个JSFIDLE吗？您没有阅读手册->使用mouseenter和mouseleave。
.slideUp（'normal'））
~什么是
'normal'
呢？它不在你的代码中的任何地方，它是。normal是一个有效的参数……normal、slideUpAmazing、slideUpAmazing、slideUpAmazing都可以使用！感谢你这个笨蛋，也感谢所有提供帮助的人！