jQuery menu problem

jQuery menu problem

I'm pretty new to jQuery. I'm trying to create a slide down menu using but i have a few problems

1. The width of the submenu that slides down is too narrow until it fully slides down when it fills to 125px which i have set by CSS. I have no clue why it is doing this.

2. When i first load the page the slide down does not work, instead the CSS display : block works when i hover over them. I'm assuming this is because the DOM is not yet ready so the function is not yet called?

3. I am using .hover to activate the slideDown and subsequent slideUp animations. So i am hovering over the <li> to slide the menu down, which works, but when i move off this <li> the menu slides up. I need to to slide up when i move off of the submenu itself, how is this achieved?

Here is my code:

HTML:
<div id="top">
              <ul id="nav">
                    <li><a href="index.php">Home</a></li>
                    <li><a class="drop" href="blog.php">Travels</a>
                        <ul id="drop_travels">
                            <li><a class="top" href="gallery.php?trip=california">California '06</a></li>
                            <li><a href="gallery.php?trip=thailand">Thailand</a></li>
                            <li><a href="gallery.php?trip=malaysia">Malaysia</a></li>
                            <li><a href="gallery.php?trip=singapore">Singapore</a></li>
                            <li><a href="gallery.php?trip=australia">Australia</a></li>
                            <li><a href="gallery.php?trip=nz">New Zealand</a></li>
                            <li><a href="gallery.php?trip=california10">California 2010</a></li>
                            <li><a href="gallery.php?trip=vancouver">Vancouver</a></li>
                            <li><a class="bottom" href="gallery.php?trip=nyc">New York City</a></li>
                        </ul>
                        <div class="clear"></div>
                    </li>
                    <li><a href="about_me.php">About Me</a></li>
                    <li><a href="portfolio.php">Portfolio</a></li>
                    <li><a href="contact.php">Contact Me</a></li>
                </ul>
            </div>


CSS:

/* sub menu */

    #wrapper #top #nav li ul#drop_travels
    {
        display : none;
        width : 125px;
        margin : 0;
        padding : 0;
        list-style-position : inside;
        list-style-type : none;
        position : absolute;
        top : auto;
        left : 0;
    }

    #wrapper #top #nav li:hover ul#drop_travels
    {
        display : block;
    }
   
    #wrapper #top #nav li #drop_travels li
    {
        margin : 0;
        width : 125px;
    }
   
    #wrapper #top #nav li #drop_travels li a
    {
        display : block;
        width : 125px;
        height : 28px;
        background : url("../Images/nav_drop_li_bg.png") top left no-repeat;
        padding-left : 5px;
        padding-top : 4px; /*Move text down*/
        margin-bottom : -4px; /*Correct so no gap between items shows*/
    }
   
    #wrapper #top #nav li #drop_travels li a.top
    {
        background : url("../Images/nav_drop_li_top_bg.png") top left no-repeat;
    }
   
    #wrapper #top #nav li #drop_travels li a.bottom
    {
        background : url("../Images/nav_drop_li_bottom_bg.png") top left no-repeat;
    }


jQuery:

$(document).ready(function(){
   
    $('#wrapper #top #nav li ul#drop_travels').width('125px');
   
    $('#wrapper #top #nav li a.drop').hover(
       function(){
            $('#wrapper #top #nav li ul#drop_travels').slideDown();
           
            },
       function(){ $('#wrapper #top #nav li ul#drop_travels').slideUp(); }     
   
    );
});


Any help appreciated!
Alex