[jQuery] Help with LavaLamp

[Karen Morales]

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

<script type="text/javascript">
    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

Karen Morales