SubMenu Disappearing

Question

У меня есть подменю, которое я делаю с помощью JQuery, но когда я покидаю свой основной LI, чтобы перейти к SubMenu, субпанель исчезает. Из того, что исследовал Ive, я вижу много раз, это CSS-выход, но я не вижу ничего плохого в моем 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>