导航下的jquery滑杆，固定定位

Question

嗨，大家好我的菜单下的滑块有问题我对jquery和css很新。

我的第一个问题是当页面加载时，菜单下没有加载栏，直到你将鼠标悬停在页面一侧加载

第二个问题是，如果我滚动缩小，条形图会消失到一边，所以这里是基本的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>