SubMenu消失

Question

我有一個子菜單，我正在使用JQuery的幫助，但是當我離開我的主要LI去SubMenu子消失。從我研究過的東西，我看到很多次這是一個CSS isue，但我不能看到我的CSS有什麼問題。我唯一想知道的其他事情是，如果HOVER功能不是要走的路？請看一下。

這裏是我的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> 

任何幫助將是巨大的！

Answer 1

如果您移動id="about"到<li>元素它應該工作更象你所期望的（<li>是你的子菜單的容器，而不是<a>標籤）

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