JQuery Lavalamp Issue

Question

Hi I keep having problems integrating a JQuery Lavalamp with Submenus. Take a look at http://karen.2kmegs.com the lavaLamp feature only works when hovering on the submenu items. I would like it to move when hovering on the root item like for example Products. My Javascript code is

function fademenu() {
 $('.fade').hover(
    function () {
      $(this).animate({backgroundColor:'#4fb4f7', color:'White'}, {queue:false,duration:900});
    }, function () {
      $(this).animate({backgroundColor:'Transparent', color:'#727272'}, {queue:false,duration:900});
    });
}

$(document).ready(function(){  
fademenu();
slider();
});

function slider() {
 closetimer = 0; 
if($("#nav")) {  
 $("#nav b").mouseover(function() {
 clearTimeout(closetimer);

  if(this.className.indexOf("clicked") != -1) {
   $(this).parent().next().slideUp(700);
   $(this).removeClass("clicked");
  }
  else {  
   $("#nav b").removeClass();
   $(this).addClass("clicked");
   $("#nav ul:visible").slideUp(700);
   $(this).parent().next().slideDown(700);
  }
  return false;
 });
 $("#nav").mouseover(function() {
 clearTimeout(closetimer);
 });
 $("#nav").mouseout(function() {
  closetimer = window.setTimeout(function(){
  $("#nav ul:visible").slideUp(700);
  $("#nav b").removeClass("clicked");
  }, 900);
 }); 
}
}

$(function() {
    $("#nav").lavaLamp({
        fx: "linear",
        speed: 500
    });
});

and my css is

#nav, #nav ul {padding:0; margin:0 auto; list-style:none; background:#fff;}
#nav {position:relative; z-index:50;}
#nav ul {display:none;}

#nav li {position:relative;}
#nav li a {text-decoration:none; font-family:Verdana, Geneva, sans-serif, serif; font-size:12px; font-weight:bold; white-space:nowrap}
#nav li b {display:block; padding:0 20px 0 20px; text-align:center; cursor:pointer; height:30px; line-height:42px; font-weight:normal; color:#FFFFFF;}
#nav li a b.clicked {color:blue;}

#nav li ul {position:absolute; left:0; top:38px; height:auto; float:left; background:white url(images/HoverSub.png) no-repeat top; padding:2px; border-bottom:1px solid #cccccc; border-left:1px solid #cccccc; border-right:1px solid #cccccc;}
#nav li ul.w1 {width:180px;}

#nav li ul li {float:none;}
#nav li ul li a {display:block; height:25px; line-height:22px; padding:0 10px; color:#727272; font-size:10px; font-weight:normal; background:white;}
#nav li ul li a:hover {background:white; color:#fff;}

.lavaLamp {
  position: relative;
  padding: 0px 0px 0px 6px;
  z-index:999;
  top:9px;
  }

.lavaLamp li {
  float: left;
  list-style: none;
}

 #nav li.back {
  background:#cccccc;
  height: 38px;
  width:12px;
  z-index: -1;
  position: absolute;
  padding-right: 0px;
}

 #nav li.back .left {
  background:#cccccc;
  height: 38px;
  margin-right: 12px;
}

.lavaLamp li a {
  z-index: 10;
}

.menuBg{
   background:#4fb4f7;
   height:47px;
   z-index:999;
}

I would glady appreciate if anyone can help me on this issue. Thanks a lot