jquery slideDown menu

Question

Hi, 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 not centerd. In firefox, when it slides down the corners are not smooth, but they are in IE.

Live test here

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;  

}

Answer 1

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

Answer 2

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