juqery仿照 flash效果求助。

做了个滑动菜单效果。
一开始没有考虑li里面内容多少的问题。直接给写死了。
现在问题来了。
不知道怎么解决。
高手帮帮忙。
CSS code

#menu_bar{widtH:700px;position:relative;height:30px;float:left;}
#menu_bar ul{height:30px;overflow:hidden; position:absolute;z-index:2;left:0px;top:0px;line-height:30px;}
#menu_bar li{float:left;text-align:center;font-size:14px;}
#menu_bar li a{color:#fff}
#menu_bar li a:hover{color:#FF3333;}
#menu_bar span{display:block;position:absolute;background:#fff;filter: alpha(Opacity=40);opacity: 0.4;-moz-opacity: 0.4;-khtml-opacity: 0.4;width:120px;z-index:1;height:30px;left:0px;top:0px;}

JS。还有jquery库。
JScript code

(function($) {
    $.fn.hoverIntent = function(f,g) {
        var cfg = {
            sensitivity: 7,
            interval: 100,
            timeout: 0
        };
        cfg = $.extend(cfg, g ? { over: f, out: g } : f );
        var cX, cY, pX, pY;
        var track = function(ev) {
            cX = ev.pageX;
            cY = ev.pageY;
        };
        var compare = function(ev,ob) {
            ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t);
            if ( ( Math.abs(pX-cX) + Math.abs(pY-cY) ) < cfg.sensitivity ) {
                $(ob).unbind("mousemove",track);
                ob.hoverIntent_s = 1;
                return cfg.over.apply(ob,[ev]);
            } else {
                pX = cX; pY = cY;
                ob.hoverIntent_t = setTimeout( function(){compare(ev, ob);} , cfg.interval );
            }
        };
        var delay = function(ev,ob) {
            ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t);
            ob.hoverIntent_s = 0;
            return cfg.out.apply(ob,[ev]);
        };

        var handleHover = function(e) {
            var p = (e.type == "mouseover" ? e.fromElement : e.toElement) || e.relatedTarget;
            while ( p && p != this ) { try { p = p.parentNode; } catch(e) { p = this; } }
            if ( p == this ) { return false; }
            var ev = jQuery.extend({},e);
            var ob = this;

            if (ob.hoverIntent_t) { ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t); }

            if (e.type == "mouseover") {
                pX = ev.pageX; pY = ev.pageY;
                $(ob).bind("mousemove",track);
                if (ob.hoverIntent_s != 1) { ob.hoverIntent_t = setTimeout( function(){compare(ev,ob);} , cfg.interval );}

            } else {
                $(ob).unbind("mousemove",track);
                if (ob.hoverIntent_s == 1) { ob.hoverIntent_t = setTimeout( function(){delay(ev,ob);} , cfg.timeout );}
            }
        };

        return this.mouseover(handleHover).mouseout(handleHover);
    };
})(jQuery);

让span宽度。随着li 里面内容的多少而改变。

不设置SPAN宽度试试
span{width:120px;z-index:1;height:30px;left:0px;top:0px;}
因为你这里限定了它的宽度

不行。这个应该需要用js控制了。但是不会写了。。。
谁做过类似的效果帮帮忙。。。

谁来帮忙指导下啊。