Färgbyte?

Hej

Är det någon som kan hjälpa mig med detta jag vill ha en sådan här meny. Den drivs med ett javascript i vanliga fall men det är oviktigt nu tycker jag. Iaf om man klickar på Hårdrock så kommer grupperna fram. Dessa ligger i en egen tabell. Nu till frågan. När man går över hårdrock så blir det en annan bakgrundfärg på den och så vill jag ha det men när jag sen går över till metallica så vill jag att bakgrundfärgen under hårdrock skall släckas och det skall bli en annan färg under Metallica. Nu blir det samma färg på både Metallica och Hårdrock. Någon som kan hjälpa mig med detta?

<table width="120" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <TD bgcolor="#009966" 
          onmouseover="this.style.backgroundColor='#9FBD9F'; "  
          onmouseout="this.style.backgroundColor='';">H&aring;rdrock 
      <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
         <TD bgcolor="#009966"   
          onmouseover="this.style.backgroundColor='#9FBD9F'; "  
          onmouseout="this.style.backgroundColor='';">Metallica</td>
        </tr>
        <tr>
          <TD bgcolor="#009966" 
          onmouseover="this.style.backgroundColor='#9FBD9F'; "  
          onmouseout="this.style.backgroundColor='';">Iron Maiden</td>
        </tr>
        <tr>
          <TD bgcolor="#009966"  
          onmouseover="this.style.backgroundColor='#9FBD9F'; "  
          onmouseout="this.style.backgroundColor='';">Kiss</td>
        </tr>
      </table></td>
  </tr>
</table>

Ett litet exempel som du kanske kan fortsätta på:

<script type="text/javascript">

window.onload = function() {
    document.getElementById( [b]"table"[/b] ).onmouseover = function(e) {

	if ( typeof (e = e || window.event) == "undefined" ) return;

	var node;
	if ( typeof (node = e.srcElement || e.target) == "undefined" ) return;

	if ( node.className == [b]"metallica"[/b] ) {
	    node.style.backgroundColor = "#9fbd9f";
	    document.getElementById( [b]"hardrock"[/b] ).style.backgroundColor = "";
	}

    }
}

</script>

<table [b]id="table"[/b] width="120" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <TD [b]id="hardrock"[/b] bgcolor="#009966" 
          onmouseover="this.style.backgroundColor='#9FBD9F'; "  
          onmouseout="this.style.backgroundColor='';">Hårdrock 
      <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
         <TD [b]class="metallica"[/b] bgcolor="#009966"  
          onmouseout="this.style.backgroundColor='';">Metallica</td>
        </tr>
        <tr>
          <TD bgcolor="#009966" 
          onmouseover="this.style.backgroundColor='#9FBD9F'; "  
          onmouseout="this.style.backgroundColor='';">Iron Maiden</td>
        </tr>
        <tr>
          <TD bgcolor="#009966"  
          onmouseover="this.style.backgroundColor='#9FBD9F'; "  
          onmouseout="this.style.backgroundColor='';">Kiss</td>
        </tr>
      </table></td>
  </tr>
</table>

:)