jquery slideDown menu

I have a link which once hovered over a box below slides down, once hover is removed it slides back up. I have it working almost to how I want, although in IE8 (Havent tested in other IE yet) the text in the box which slides down is n开发者_如何转开发ot centerd. In firefox, when it slides down the corners are not smooth, but they are in IE.

Code:

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

Any advice, also is it better to use .hover or .mouseEnter / mouseLeave?

Thanks

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;  

}

try this!

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

I would bet the centered text issue is not a jquery issue but rather a css issue. Have you tried using the style="text-align: center;" like so