jquery - 固定位置のナビゲーションの下のjqueryスライドバー

Question

こんにちは、私のメニューの下にあるスライダーバーに問題があります。jquery と css は初めてです。

私の最初の問題は、ページがロードされたときに、ページの横にマウスオーバーするまでバーがメニューの下にロードされないことです

2番目の問題は、スクロールアウトするとズームアウトするとバーが横に消えるため、ここに基本的なhtml cssとjqueryがあります..誰かが助けてくれることを願って本当に立ち往生しています

ここでの私の最初の投稿は正しく行われました...最初にcssの助けが必要です

#topnav { position: relative; width: 997px; height: 50px; background: url(../images/pictures/large/system-files/navbg.png) no-repeat; }
                    #navbar { width: 997px; height: 38px; }             
                    #slider-container {  height: 16px; width: 997px; position: relative;}
        #menu-slide {
        height: 16px;
        width: 64px;
        background: url(../images/pictures/large/system-files/glowbg.png);
        font-size: 1px;
        line-height: 1px;
        z-index: -5;
        position: fixed;
        top: 180px;
        left: 20px;
        }

今jquery

<script type="text/javascript">
     $(document).ready(function() {
            $('#slideshow').cycle({
                fx:      'scrollHorz',
                timeout:  0,
                prev:    '#prev',
                next:    '#next'
            }); 
         $('ul.sf-menu').superfish({
         autoArrows:  false
         });
         $("#background_image").fullBg();

        $('li').mouseover( function() { 
            $('.active').removeClass('active');
            $(this).addClass('active');
            //var top = $(this).offset().top + $(this).height() + 5;
            var left = $(this).offset().left + ($(this).width() / 2 - 20);
            $('#menu-slide').stop().animate( {left: left  }, 400 );
        });
        $('li').mouseleave(function(){
             var left = $('.first').offset().left + ($('.first').width() / 2 - 20);
             $('#menu-slide').stop().animate( {left: left  }, 400 );
        });
     });
    </script>
    <script type="text/javascript"> 
      function pageLoad() { 
        var left = $('.first').offset().left + ($('.first').width() / 2);
            $('#menu-slide').stop().animate( {left: left  }, 400 );
      } 
    </script>

今、html

<div id="topnav">                    
                        <ul id="navbar"class="sf-menu">
                            <li class="current first"><a href="#a">HOME</a></li>
                            <li><a href="#">ABOUT US</a>
                                <ul>
                                    <li><a href="#">Menu 1</a></li>
                                    <li><a href="#">Menu 2</a></li>
                                </ul>
                            </li>
                            <li><a href="#">CORPORATE</a></li>
                            <li><a href="#">CRUSING</a></li>
                            <li><a href="#">LEISURE</a></li>
                            <li><a href="#">GROUPS</a></li>
                            <li><a href="#">VIRTUOSO</a></li>
                            <li><a href="#">LINKS</a></li>
                            <li class="last"><a href="#">CONTACT</a></li>
                        </ul>
                            <div id="slider-container">
                                <div id="menu-slide"></div>
                            </div>
                        </div>