Getting Lavalamp plugin to work with dropdown menu?

Getting Lavalamp plugin to work with dropdown menu?

I have a problem with the jQuery Lavalamp plugin ( http://gmarwaha.com/blog/?p=7 ). It works perfectly with a single-level menu, but after adding a dropdown it gets a bit lost. Here's what I mean: http://screenr.com/0fS .

Of course what I would like to achieve is for the lavalamp background to stay on the Portfolio item when the user hovers over the subitems.

I guess it's a matter of changing the plugin slightly. What's needed is just a simple way to make the lavalamp stop at the current stage when list item's children are hovered and then go back to working normally after. Here's the full plugin code for reference:

(function($) {
$.fn.lavaLamp = function(o) {
o = $.extend({ fx: "linear", speed: 500, click: function(){} }, o || {});

return this.each(function() {
    var me = $(this), noop = function(){},
        $back = $('<li class="back"><div class="left"></div></li>').appendTo(me),
        $li = $("li", this), curr = $("li.current", this)[0] || $($li[0]).addClass("current")[0];

    $li.not(".back").hover(function() {
        move(this);
    }, noop);

    $(this).hover(noop, function() {
        move(curr);
    });

    $li.click(function(e) {
        setCurr(this);
        return o.click.apply(this, [e, this]);
    });

    setCurr(curr);

    function setCurr(el) {
        $back.css({ "left": el.offsetLeft+"px", "width": el.offsetWidth+"px" });
        curr = el;
    };

    function move(el) {
        $back.each(function() {
            $(this).dequeue(); }
        ).animate({
            width: el.offsetWidth,
            left: el.offsetLeft
        }, o.speed, o.fx);
    };

});
};
})(jQuery);


Thanks in advance!