Verschachteltes CSS - brauche Hilfe

[Prominenter]

Hi@all

Hier erst mal mein CSS-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

<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

[Kropff]

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.

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