SubMenu 사라짐

Question

JQuery의 도움으로 하위 메뉴를 가지고 있지만 하위 메뉴로 이동하기 위해 주 LI를 남겨두면 하위가 사라집니다. 필자가 조사한 바에 따르면, CSS에 관한 것이 많지만 내 CSS에 문제가없는 것을 많이 볼 수 있습니다. 호버 기능이 갈 길이 아닌지 궁금해하는 유일한 다른 점은 무엇입니까? 이것을 봐주세요.

다음

<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; 
} 

는 해당 페이지의 일부입니다 :

여기에 문제의 부품에 대한 내 CSS와 자바 스크립트입니다

<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 id="about"><a href="http://www.alan.com">About</a>