Subnavigation: Aktive Ebene1 gibt seine Styles an Ebene 2 weiter

[Andi]

Hallo zusammen!

Ich sitze seit vier Stunden vor meinem Quelltext und zweifle langsam an mit selber.

Ich habe eine horizontale Hauptnavigation und links neben dem Inhalt eine zweistufige Subnavigation. Die Seite läuft auf Bais des CMS MODX und die Navi mit dem CMS-eigenen Package Wayfinder. Ausgegeben wird für die Subnavi folgender recht simpler Quellcode:

<div class="subnavi">  
<ul>  
<li class="first active">  
<a title="Subnaviebene 1" href="index.php?id=3">Subnaviebene 1</a>  
<ul>  
<li class="first">  
<a title="Subnaviebene 2" href="index.php?id=4">Subnaviebene 2</a>  
</li>  
<li>  
<a title="Subnaviebene 2" href="index.php?id=6">Subnaviebene 2</a>  
</li>  
<li>  
<a title="Subnaviebene 2" href="index.php?id=8">Subnaviebene 2</a>  
</li>  
<li>  
<a title="Subnaviebene 2" href="index.php?id=9">Subnaviebene 2</a>  
</li>  
<li>  
<a title="Subnaviebene 2" href="index.php?id=10">Subnaviebene 2</a>  
</li>  
<li>  
<a title="Subnaviebene 2" href="index.php?id=11">Subnaviebene 2</a>  
</li>  
<li class="last">  
<a title="Subnaviebene 2" href="index.php?id=12">Subnaviebene 2</a>  
</li>  
</ul>  
</li>  
<li>  
<a title="Subnaviebene 1" href="index.php?id=7">Subnaviebene 1</a>  
</li>  
<li>  
<a title="Subnaviebene 1" href="index.php?id=13">Subnaviebene 1</a>  
</li>  
<li class="last">  
<a title="Subnaviebene 1" href="index.php?id=14">Subnaviebene 1</a>  
</li>  
</ul>  
</div>

Es wird also eine normale ungeordnete Liste des im CMS angelegten Seitenbaums erzeugt. Die IDs sind die IDs der jeweiligen Seiten im CMS.

Das CSS davon sieht so aus:

/*----- Subnavigation -----*/  
  
.subnavi {  
font: bold 11px Verdana, Arial, Helvetica, sans-serif;  
color:#66ccff;  
width:200px;  
height:250px;  
float:left;  
margin-top:20px;  
}  
  
.subnavi ul {  
list-style:none;  
margin:0;  
padding:0;  
}  
  
  
/*----- Subnavi Ebene 1  -----*/  
  
.subnavi ul li {  
margin-bottom:30px;  
}  
  
.subnavi ul li a {  
color:#66ccff;  
background:url(../img/common/pfeil_subnavi_hover.png) left no-repeat;  
padding-left:15px;  
text-decoration:none;  
}  
  
  
.subnavi ul li a:hover {  
color:#ffffff;  
background:url(../img/common/pfeil_subnavi.png) left no-repeat;  
  
}  
  
  
.subnavi ul li.active a {  
color:#ffffff;  
background:url(../img/common/pfeil_subnavi.png) left no-repeat;  
}  
  
  
/*----- Subnavi Ebene 2 -----*/  
  
.subnavi ul li ul {     /*----- Ganzer Subnaviblock -----*/  
margin:15px 0 15px 20px;  
}  
  
  
.subnavi ul li ul li {   /*----- Subnavi Einzelpunkte -----*/  
margin:0 0 10px 0;  
}  
  
  
.subnavi ul li ul li a {  
color:#66ccff;  
background:url(../img/common/pfeil_subnavi_hover.png) left no-repeat;  
padding-left:15px;  
text-decoration:none;  
}  
  
.subnavi ul li ul li a:hover,  
.subnavi ul li ul li.active a {  
background:url(../img/common/pfeil_subnavi.png) left no-repeat;  
color:#ffffff;  
}

Was ich nun nicht verstehe: Die Navigationspunkte der Ebene 2 nehmen die Styles an die ich bei

.subnavi ul li.active a

definiert habe. Anstatt diese anzunehmen die ich bei

.subnavi ul li ul li a

definiert habe. Wenn ich die obere Definition auskommentiere funktioniert die Untere.

Das Einzige was mit noch einfällt ist, dass der aktive Oberpunkt der Subnavi also:

.subnavi ul li.active a

seine Styles an seine Unterpunkte vererbt. Aber darüber habe ich erstens nirgends etwas gefunden und zweitens habe ich ja Definitionen für diesen Bereich im CSS geschrieben.

Ich hoffe ich konnte mein Problem einigermaßen verständlich rüberbringen.

Vielen Dank für Eure Mühe und sonnige Grüße

Andi