jQuery slideDown/slideUp behavior
===

I'm using jQuery slideDown/slideUp functions to create a menu that displays links when you mouseover it.  The menu is an image that contains a menu title and when you mouseover the image it grows vertically displaying the links.  The menu images/links are contained in a div to help position the images.

I'm able to get the menu images to grow vertically displaying all links, but when I attempt to **hover** over the bottom links jQuery collapses the image prematurely.  What is even more odd is the menus work correctly when at the top of the screen, but quit fully working when I position the menu images where they belong on the background image.

It appears the **hover region** is not growing vertically with the image, but staying the original height of the collapsed image.

The following are my jQuery functions:

        $( document ).ready
           (
              function()
              {
                 $( '.down-list' ).width( $( '.dropdown-menu' ).width() );
        
                 $( '.dropdown-menu' ).hover
                    (
                       function()
                       {
                          $( '.menu-first', this ).addClass( 'slide-down' );
                          $( '.down-list', this ).slideDown( 50 );
                       },
        
                       function()
                       {
                          obj = this;
        
                          $( '.down-list', this ).slideUp
                             (
                                50,
        
                                function()
                                {
                                   $( '.menu-first', obj ).removeClass( 'slide-down' );
                                }
                             );
                       }
                    );
              }
           );


Here is the HTML:

           <body>
              <div id="container">
                 <img name="background" src="images/background.jpg" width="1600" height="1238" border="0" alt="Legend of Kung Fu - Branson, MO" usemap="#navMap" />
        
                 <map name="navMap">
                    <area shape="rect" coords="387,9,717,95" href="http://www.kungfubranson.com" alt="Home" />
                    <area shape="rect" coords="833,0,1008,100" href="http://foursquare.com/venue/6109987" target="_blank" alt="Four Square" />
                    <area shape="rect" coords="1045,45,1080,79" href="http://twitter.com/KungFuBranson" target="_blank" alt="Twitter" />
                    <area shape="rect" coords="1087,45,1122,78" href="http://www.facebook.com/kungfubranson" target="_blank" alt="Facebook" />
                    <area shape="rect" coords="1131,45,1167,79" href="http://www.youtube.com/kungfubranson" target="_blank" alt="YouTube" />
                    <area shape="circle" coords="1273,56,37" href="https://tickets.kungfubranson.com" target="_blank" alt="Buy Tickets Now!" />
                 </map>
        
                 <div id="menuLinks">
                    <div class="dropHolder">
                       <div class="dropdown-menu">
                          <div class="menu-first">
                             <div class="menu-first2">
                                Show <br />
                                Info
                             </div>
                          </div>
        
                          <ul class="down-list" style="display:none;">
                             <li style="padding-top: 24px;">
                                <a href="story.php">Story</a>
                             </li>
        
                             <li>
                                <a href="news.php">News</a>
                             </li>
        
                             <li>
                                <a href="reviews.php">Reviews</a>
                             </li>
        
                             <li>
                                <a href="contact.php">Contact</a>
                             </li>
                          </ul>
        
                          <img src="images/lanternBottom.png" alt="" />
                       </div>
                    </div>
                 </div>
        
                 <div id="content">
                 </div>
              </div>
           </body>

Here is the corresponding CSS:

        /*-------------------------------*/
        /* Contains every Division Layer */
        /*-------------------------------*/
        body
        {
           margin: 0px;
           padding: 0px;
           background-color: #FFF0E0;
           font-family: Arial, Helvetica, sans-serif;
           font-size: 16px;
           font-style: normal;
           font-variant: normal;
           font-weight: normal;
        }
        
        /*-------------------------------------------------------------------*/
        /* Primary Division Layer and the ONLY one with a Relative Position  */
        /* permitting entire page to resize according to browser window size */
        /*                                                                   */
        /* Used on Home Page and contains all subsequent Division Layers     */
        /*-------------------------------------------------------------------*/
        #container
        {
           position: relative;
           margin: 0 auto 0 auto;
           width: 1600px;
           height: 1238px;
        }
        
        /*---------------------------------*/
        /* Contains Menu Image Label Links */
        /*---------------------------------*/
        #menuLinks
        {
           position: absolute;
           top: 200px;
           left: 491px;
           width: 582px;
           height: 200px;
        }
        
        .dropHolder
        {
           width: 90px;
           float: left;
           height: 1px;
           margin-left: 2px;
           line-height: 1.2em;
           color: #000;
           font-variant: normal;
           font-size: 13.5px;
           font-family: "Trebuchet MS", Helvetica, sans-serif;
           font-weight: bolder;
        }
        
        .dropHolder html, .dropHolder div, .dropHolder span, .dropHolder applet, .dropHolder object, .dropHolder iframe, .dropHolder blockquote, .dropHolder pre,
        .dropHolder a, .dropHolder abbr, .dropHolder acronym, .dropHolder address, .dropHolder big, .dropHolder cite, .dropHolder code,
        .dropHolder del, .dropHolder dfn, .dropHolder em, .dropHolder font, .dropHolder img, .dropHolder ins, .dropHolder kbd, .dropHolder q, .dropHolder s, .dropHolder samp,
        .dropHolder small, .dropHolder strike, .dropHolder strong, .dropHolder sub, .dropHolder sup, .dropHolder tt, .dropHolder var,
        .dropHolder dl, .dropHolder dt, .dropHolder dd, .dropHolder ol, .dropHolder ul, .dropHolder li
        {
           margin: 0;
           padding: 0;
           border: 0;
           outline: 0;
           vertical-align: baseline;
        }
        
        .dropHolder ol, .dropHolder ul
        {
           list-style: none;
        }
        
        .dropdown-menu
        {
           position: absolute;
           width: 90px;
           cursor: pointer;
           z-index: 1000px;
        }
        
        .dropdown-menu a:link, .dropdown-menu a:visited
        {
           color: #000 !important;
           display: block !important;
           text-decoration: none !important;
           margin: 0 !important;
           width: 90px;
        }
        
        .dropdown-menu a:hover
        {
           color: #cb0202 !important;
           text-decoration: none !important;
           width: 90px;
        }
        
        .dropdown-menu .slide-down
        {
           background: url(../images/lanternTop.png) no-repeat;
           width: 90px;
        }
        
        .menu-first
        {
           background: transparent url(../images/lanternTop.png) no-repeat;
           width: 90px;
           height: 38px;
           text-align: center;
           padding: 0px 0px 0px 0px;
           vertical-align: bottom;
           line-height: 14px;
        }
        
        .menu-first2
        {
           position: relative;
           bottom: -23px;
           z-index: 100;
        }
        
        .down-list
        {
           background: url(../images/lanternMiddle.png) repeat-y;
           width: 90px;
           margin-left: 0px;
           z-index: 500;
           font-size: 13px;
        }
        
        .down-list li
        {
           background: url(../images/lanternMiddle.png) repeat-y;
           width: 90px;
           height: 25px;
           padding: 0px 0px 0px 0px;
           text-align: center;
           line-height: 24px;
           vertical-align: bottom;
        }
        
        .down-list_OFF .lastLI_OFF
        {
           background: url(../images/lanternMiddle.png) repeat-y;
           width: 88px;
           height: 8px;
           line-height: 12px;
           vertical-align: bottom;
        }
        
        /*-----------------------*/
        /* Contains Page Content */
        /*-----------------------*/
        #content
        {
           position: absolute;
           top: 316px;
           left: 413px;
           width: 771px;
           height: 825px;
           text-align: justify;
           overflow-x: hidden;
           overflow-y: auto;
        }

I'm using jquery-1.7.2.min.js.

Thanks in advance for any help.

Brandon