UI高手请进，请教个jquery+css菜单问题。

[流放梦想]

请教一个jquery滑动菜单问题，演示地址：

http://www.kriesi.at/wp-content/extra_data/kwicks_tutorial/kwicks_final.html

怎样改变这个导航菜单的宽度？

我模仿它这个做了一个，脚本效果没问题，但是我的菜单项目比较多有8个，这样就导致无法正常显示，想修改它的宽度，不知道从哪里下手。


正常显示效果


太长不能正常显示

原创教程地址：http://www.kriesi.at/archives/apple-menu-improved-with-jquery

附CSS样式表：

body{
font-family:Verdana, Arial, Helvetica, sans-serif;

}
 .kwicks {  
     list-style: none;  
     position: relative;  
     margin: 0;  
     padding: 0; 
         background-image:url(no_flicker.png); /*some browsers are to slow when aligning the menu items via jQuery and so the background shines through, this prevents this flickering*/

 }  
 .kwicks li{  
    display: block;  
    overflow: hidden;  
    padding: 0;  
    cursor: pointer;  
        float: left;
        width: 125px;
        height: 40px;
        margin-right: 0px;
        background-image:url(top_menu.png);
        background-repeat:no-repeat;
}
.kwicks a{
        display:block;
        height:40px;
        text-indent:-9999px;
        outline:none;
}

#kwick1 {
        background-position:0px 0px;
}
#kwick2 {
        background-position:-200px 0px;
}
#kwick3 {
        background-position:-400px 0px;
}
#kwick4 { 
        background-position:-600px 0px;
}

#kwick1.active, #kwick1:hover { 
        background-position: 0 bottom;
}
#kwick2.active, #kwick2:hover{
        background-position: -200px bottom;
}
#kwick3.active, #kwick3:hover {
        background-position: -400px bottom;
}
#kwick4.active, #kwick4:hover {
        background-position: -600px bottom; 
}

#kwick1 a{
        background-image:url(end.png);
        background-repeat:no-repeat;
        background-position: left 0px;
}

#kwick1 a:hover{
        background-position: left -80px;
}

#kwick4 a{
        background-image:url(end.png);
        background-repeat:no-repeat;
        background-position: right -40px;
}
#kwick4 a:hover{
        background-position: right -120px;
}

[chinaskysun]

宽度就是kwicks li中的width: 125px;这里可以改变单个li的宽度，增减li个数就可以改变菜单的数量和总长度