Verschachteltes CSS - brauche Hilfe

Hi@all

Hier erst mal mein CSS-Code:

PHP-Code:

/* ================ MENU 2 ================ */
#menu
{
 clear:both;
 width:1024px;
 height:30px;
 background: url(../images/button.png) center top repeat-x;
 border-bottom: 1px solid #CC0000;
 text-align:center;
}
#menu ul
{
 padding:0;
 margin:0;
 border:0;
}
#menu ul ul
{
 position: absolute;
 width: 256px;
 display: none;
}
#menu li
{
 position: relative;
 list-style: none;
 width: 256px; 
 float: left;
 background: url(../images/button.png) center top no-repeat; 
}
#menu ul li a, #menu ul li a:visited , #menu ul li a:active 
{
 width:256px;
 height:30px;
 float: left;
 margin: 0px;
 padding: 0px;
 line-height:30px;
 text-align:center;
 color:#CCCCCC;
 text-transform:capitalize;
 font-variant:small-caps;
 text-decoration:none ;
 font-family: Trebuchet MS, Helvetica, sans-serif;
 font-family: "Century Gothic", Verdana, Helvetica, Sans-serif;
 font-family: "Lucida Grande",Lucida,Verdana,sans-serif;
 font-size: 0.75em;
 font-weight:normal; 
 text-decoration:none ;
}
#menu ul li a:hover 
{
 background: url(../images/button_hover_white.png) center top no-repeat;
 color:#CC0000;
 text-decoration:none ;
}
#menu li.submenu a.sublink
{
 background: url(../images/dropmenu.png) 95% 50% no-repeat;
}
#menu li.submenu:hover 
{
 background: url(../images/button_hover_white.png) center top no-repeat;
}
#menu li.submenu li.submenu 
{
 background: url(../images/button.png) center top no-repeat;
}
#menu li.submenu li.submenu a.sublink
{
 background: url(../images/submenu.gif) 95% 50% no-repeat;
}
#menu li.submenu li.submenu:hover
{
 background: url(../images/button_hover_white.png) center top no-repeat;
}
#menu ul.level1 li.submenu:hover ul.level2, #menu ul.level2 li.submenu:hover ul.level3
{
 display:block;
}
#menu ul.level2
{
 top: 30px;
 //left: -1px;
}
#menu ul.level3
{
 //top: -1px;
 left: 258px;
} 


und das dazugehörige HTML

PHP-Code:

<div id="menu">
<!-- Beginn Menu 2 -->
<ul class="level1">
 <li><a href="<?php $_SERVER['PHP_SELF']; ?>?page=haupt">Forside</a></li>
 
  <li class="submenu"><a class="sublink" href="#">Design møbler</a>
  <ul class="level2">
   <li class="submenu"><a class="sublink" href="#">Design-Sofa</a>
    <ul class="level3">
     <li><a href="<?php $_SERVER['PHP_SELF']; ?>?page=sofa_woche">Woche- kolleksjon</a></li>
     <li><a href="<?php $_SERVER['PHP_SELF']; ?>?page=sofa_iq">IQ- kolleksjon</a></li>
     <li><a href="<?php $_SERVER['PHP_SELF']; ?>?page=sofa_dezine">Dezine- kolleksjon</a></li>
    </ul>
   </li>
   <li class="submenu"><a class="sublink" href="#">Design-Seng</a>
    <ul class="level3">
     <li><a href="<?php $_SERVER['PHP_SELF']; ?>?page=seng_iq">IQ- kolleksjon</a></li>
    </ul>
   </li>
   <li class="submenu"><a class="sublink" href="#">Design-Rattan</a>
    <ul class="level3">
     <li><a href="<?php $_SERVER['PHP_SELF']; ?>?page=rattan_iq">IQ- kolleksjon</a></li>
    </ul>
   </li>
  </ul>
 </li>
 
 <li class="submenu"><a class="sublink" href="#">Generelt</a>
  <ul class="level2">
   <li><a href="<?php $_SERVER['PHP_SELF']; ?>?page=nyttig">Nyttig informasjon</a></li>
   <li><a href="<?php $_SERVER['PHP_SELF']; ?>?page=bestilling">Bestilling, Betaling, Levering</a></li>
   <li><a href="<?php $_SERVER['PHP_SELF']; ?>?page=kjøpsbetingelser">Kjøpsbetingelser</a></li>
   <li><a href="<?php $_SERVER['PHP_SELF']; ?>?page=omoss">Om oss</a></li>   
  </ul>
 </li>
 
 <li><a href="<?php $_SERVER['PHP_SELF']; ?>?page=kontakt">Kontakt</a></li> 
 
</ul>
</div>
<!-- Ende Menu  -->

Nun zu meinem Problem:
Alles funktioniert wunderbar, soweit vorab.
Ich möchte nun gern noch, das wenn Level 2 angezeigt wird um Level 1 Link-COLOR=schwarz, bzw. wenn level 3 angezeigt wird dann Level 2 Link-COLOR=schwarz

Ich hoffe es klingt nicht zu kompliziert
Jetzt ist es so :
Alle Links im Menue sind Hellgrau
Fahre ich mit der MAus darüber wird der Hintergund hellgrau und der Links selbst rot
Fahre ich jedoch ins Untermenu zu Level 2 bleibt der vorher gewechselte Hintergund von level1 grau ( soll er auch) aber der Link wird wieder hellgrau, und genau da komm ich nicht weiter.

Menueaufbau

Level1
Level2
Level3
Level2
Level3
Level1


Gruß und schon mal vielen Danke

Da wirst du wohl nur mit javascript weiterkommen, da :hover beendet wird, wenn man das Element verlässt.

Auf den ersten Blick sieht das nach so was aus.

PHP-Code:

window.onload = function() {
  var a = document.getElementById('menu').getElementsByTagName('a');
  for (var i = 0; i < a.length; i++) {
    a[i].onmouseover = function() {
      this.parentNode.parentNode.parentNode.firstChild.style.color = '#irgendwas';
    }
  }
} 


Blind gehackt und nicht getestet. Nur von Prinzip her.

Peter