LavaLamp / Hover Text Issue

LavaLamp / Hover Text Issue

Hi guys

I've created a simple LavaLamp menu with JQuery, however the problem is that by default my text color is White, and the LavaLamp hover image is White too, therefore when the Active tab is clicked, the text doesnt show (but the others do since its not active/clicked)

Also I noticed that the text colour changes when on Hover, but when it loses focus (the LavaLamp effect still remains on the hovered text) the text turns white.

What im trying to achieve is that when the tab is selected, the text turns Black, and also when the LavaLamp Hover moves over a root tab the text turns black and doesnt lose its colour (turning white again) when going on the SubMenu

The following is my css code which might come in useful!


#nav {
  list-style: none;
  margin: 0 auto;
  padding-left: 8px;
  overflow:visible;
  height:50px;
  }

   
#nav ul {
  margin: 0;
  padding: 0;
  }

#nav li {
 
  margin: 0;
  height: 25px;
  padding: 0;
 
  }

#nav li a {
  display: block;
  line-height: 38px;
  margin: 0;
  padding: 0 20px 0 15px;
  font-size: 11px;
  font-family:Verdana, Geneva, sans-serif;
  font-weight:bold;
  text-decoration:none;
  color: #ffffff;
  letter-spacing: -1px;
  }

#nav li a:hover {
  display: block;
  line-height: 38px;
  margin: 0;
  padding: 0 20px 0 15px;
  font-size: 11px;
  font-family:Verdana, Geneva, sans-serif;
  font-weight:bold;
  text-decoration:none;
  color: #727272;
  letter-spacing: -1px;
  }

#nav a.active {
  color: red;
  }
 
#nav li ul a {
  display: block;
  line-height: 44px;
  margin: 0;
  padding: 0 20px 0 15px;
  font-size: 10px;
  font-family:Verdana, Geneva, sans-serif;
  color: #000000;
  letter-spacing: -1px;
  }

#nav li ul {
  position: absolute;
  width: 150px;
  background-color:transparent;
  top: 41px;
  left: -999em;
  padding-top:8px;
  }

#nav li:hover ul, #nav li.sfhover ul {
  left: auto;
  }
   
   
#nav li li { 
  padding: 0;
  width: 150px;
  }


#nav li li a {
  height: 30px;
  line-height: 30px;
  color: #000000;
  background-color:#FFFFFF;
  border-left:solid 1px #727272;
  border-right:solid 1px #727272;
  margin: 0;
  }
   
#nav li li a:hover {
  background-color: #FFFFFF;
  background:url(images/HoverSub.png) no-repeat top left;
  }

#nav li:hover, #nav li.sfhover {
  position: static;
  }

.lavaLamp {
  position: relative;
  height: 60px;
  padding: 0px 0px 0px 6px;
  overflow: hidden;
  z-index:9999;
  padding-top:9px;
  }

.lavaLamp li {
  float: left;
  padding-left:10px;
  list-style: none;
  padding-right: 10px;
}

#nav li.back {
  background:url(images/RightHover.png) no-repeat top right;
  height: 50px;
  width:12px;
  z-index: -1;
  position: absolute;
  padding-right: 0px;
}

#nav li.back .left {
  background:url(images/LeftHover.png) no-repeat top left;
  height: 50px;
  margin-right: 12px;
}

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



Thanks

Hope its not too confusing!