sto facendo un sito con un menu orizzontale con un bellissimo effetto fluido animato, ma ho un problema perchè lo script che ho scaricato, così com'è, non sente il click. Nella pagina html c'è il seguente codice

<script type="text/javascript">
$(function() {
$("#2").lavaLamp({
fx: "backout",
speed: 700,
click: function(event, menuItem)

{
return false;
}
});
});
</script>

se metto return true, sente il click, mi va nella pagina del menu, ma il quadratino che scorre sopra le voci di menu si riposizione sempre a sinistra su HOME. Io vorrei che, oltre ovviamente a sentire il click, il quadrato rimanesse sulla voce di menu selezionata. Cosa va modificato? Vi metto anche il codice del file
jquery.lavalamp.min.js

(function($){$.fn.lavaLamp=function(o){o=$.extend( {fx:"linear",speed:500,click:function(){}},o||{}); return this.each(function(){var b=$(this),noop=function(){},$back=$('<li class="back"><div class="left"></div>').appendTo(b),$li=$("li",this),curr=$("li.cur rent",this)[0]||$($li[0]).addClass("current")[0];$li.not(".back").hover(function(){move(this)},noo p);$(this).hover(noop,function(){move(curr)});$li. click(function(e){setCurr(this);return o.click.apply(this,[e,this])});setCurr(curr);function setCurr(a){$back.css({"left":a.offsetLeft+"px","wi dth":a.offsetWidth+"px"});curr=a};function move(a){$back.each(function(){$.dequeue(this,"fx") }).animate({width:a.offsetWidth,left:a.offsetLeft} ,o.speed,o.fx)}})}})(jQuery);


e il quello del file lavalamp_test.css

.lavaLampWithImage {
position: relative;
height: 29px;
width: 421px;
background: url("bg.gif") no-repeat top;
padding: 15px;
margin: 10px 0;
overflow: hidden;
}
.lavaLampWithImage li {
float: left;
list-style: none;
}
.lavaLampWithImage li.back {
background: url("lava.gif") no-repeat right -30px;
width: 9px; height: 30px;
z-index: 8;
position: absolute;
}
.lavaLampWithImage li.back .left {
background: url("lava.gif") no-repeat top left;
height: 30px;
margin-right: 9px; /* 7px is the width of the rounded shape */
}
.lavaLampWithImage li a {
font: bold 14px arial;
text-decoration: none;
color: #fff;
outline: none;
text-align: center;
top: 7px;
text-transform: uppercase;
letter-spacing: 0;
z-index: 10;
display: block;
float: left;
height: 30px;
position: relative;
overflow: hidden;
margin: auto 10px;
}
.lavaLampWithImage li a:hover, .lavaLampWithImage li a:active, .lavaLampWithImage li a:visited {
border: none;
}

.lavaLampNoImage {
position: relative;
height: 16px;
width: 610px;
background-color: white;
padding: 15px;
margin: 10px 0;
overflow: hidden;
border: 1px solid gray;
}
.lavaLampNoImage li {
float: left;
margin-top: -8px;
list-style: none;
}
.lavaLampNoImage li.back {
border: 1px solid #000;
background-color: #e6e8ea;
width: 9px;
height: 30px;
z-index: 8;
position: absolute;
}
.lavaLampNoImage li a {
font: 17px verdana;
text-decoration: none;
color: #2000c0;
outline: none;
text-align: center;
top: 5px;
letter-spacing: 0;
z-index: 10;
display: block;
float: left;
height: 30px;
position: relative;
overflow: hidden;
margin: auto 15px;
}
.lavaLampNoImage li a:hover, .lavaLampNoImage li a:active, .lavaLampNoImage li a:visited {
border: 1px;
}

.lavaLampBottomStyle {
position: relative;
height: 29px;
width: 421px;
background-color: white;
padding: 15px;
margin: 10px 0;
overflow: hidden;
border: 1px solid gray;
}
.lavaLampBottomStyle li {
float: left;
list-style: none;
}
.lavaLampBottomStyle li.back {
border-bottom: 5px solid blue;
width: 9px;
height: 30px;
z-index: 8;
position: absolute;
}
.lavaLampBottomStyle li a {
font: bold 14px arial;
text-decoration: none;
color: #000;
outline: none;
text-align: center;
top: 7px;
text-transform: uppercase;
letter-spacing: 0;
z-index: 10;
display: block;
float: left;
height: 30px;
position: relative;
overflow: hidden;
margin: auto 10px;
}
.lavaLampBottomStyle li a:hover, .lavaLampBottomStyle li a:active, .lavaLampBottomStyle li a:visited {
border: none;
}

spero potrete aiutarmi, magari è una bischerata ma non essendo un programmatore professionista non la "vedo". Grazie.