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