jquery slideDown menu

Question

일단 슬라이드 아래에있는 상자 위로 마우스를 가져간 링크가 있으면 슬라이드가 제거되면 슬라이드가 위로 올라갑니다. IE8 (Havent는 다른 IE에서 아직 테스트 중)에서 슬라이드가있는 상자의 텍스트가 가운데에 있지 않지만 원하는대로 거의 작동합니다. 파이어 폭스에서, 그것이 아래로 미끄러 져 내릴 때 모서리는 매끄럽지 않다. 그러나 그들은 IE에있다.

코드 :

<script type="text/javascript"> 

$(document).ready(function() 
{ 
    $('#nav_top').corners('5px'); 
     $('#nav_bottom').hide(); 
     $('#nav_bottom').corners(); 

    $('#link').hover(function() 
     { 
      $('#nav_top').corners('10px top'); 
      $('#nav_bottom').stop(true, true).slideDown();     
      $('#nav_bottom').slideDown("slow"); 



     }, 

     function() 
     { 
     $('#nav_bottom').slideUp("fast"); 

    } 

     );   


}); 

</script> 


<div id="nav_top"> 

<a href="javascript:void(0);" id="link">Hover</a> 

<div id="nav_bottom"> 

<br />Stuff 

</div> 

</div> 

</div> 

어떤 조언을, 또한 그것이 더 나은 .hover 사용하거나 .mouseEnter /하는 MouseLeave?

감사

CSS는 :

nav_top 
{ 
background-color: #084B8A; 
text-align: center; 
margin-left: 150px; 
margin-top: 15px; 
width: 100px; 
padding: 20px; 
font-size: 20px; 
} 

#nav_top a 
{ 
text-decoration: none; 
color: #ffffff; 
} 


#nav_bottom 
{ 
text-align: center; 
background-color: #084B8A; 
z-index: 1; 
padding: 30px; 

} 

Answer 1

이것을 시도하십시오!

$("#link").hover(
    function() { 
    $('#nav_top').corners('10px top'); 
    $(this).next().slideDown("slow"); 
    }, 
    function() { 
    $(this).next().slideUp("fast"); 
    } 
); 

CSS

in anycase you need to set the position: 
//container 
#nav_top { 
  position: relative; 
} 
//the inner element 
#nav_bottom { 
  position: absolute; 
  
} 

Answer 2

내가 중심의 텍스트 문제가 JQuery와 문제가 오히려 CSS는 문제가되지 않습니다 내기 것입니다. style = "text-align : center;"를 사용해 보셨습니까? 이렇게