jquery slideDown菜单

Question

我有一个链接曾经悬停在下面的一个方框上滑下来，一旦悬停被移除它就会向上滑动。我的工作几乎是我想要的，尽管在IE8中（尚未在其他IE中测试过），滑动的框中的文字不是居中的。在Firefox中，当它向下滑动时，角落不平滑，但它们在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

我敢打赌，中心文本问题不是jquery问题，而是css问题。您是否尝试过使用style =“text-align：center;”像这样

Answer 2

试试这个！

$("#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;
 
}