Hintergrundfarbe

[alterego]

Ich habe ein Problem mit der Hintergrundfarbe des aktiven Schalters. Code im Template:
------------------------------------------
<div class="navigation">

<ul>
<!-- top level categories -->
<?foreach (OOCategory::getRootCategories() as $cat):?>
<li><a href='<?=$cat->getUrl()?>'><?=$cat->getName()?></a><ul>

<!-- 1st level categories -->
<?foreach ($cat->getChildren() as $sub1):?>
<li><a href='<?=$sub1->getUrl()?>'><?=$sub1->getName()?></a><ul>

<!-- 2nd level categories -->
<?foreach ($sub1->getChildren() as $sub2):?>
<li><a href='<?=$sub2->getUrl()?>'><?=$sub2->getName()?></a></li>
<?endforeach;?>

</ul></li>
<?endforeach;?>
</ul></li>
<?endforeach;?>
</ul>
</div></div>
<!-- Kommentar -->
</div>

---------------------------
CSS

.navigation {
height: auto;
width: 100%;
float:left;
padding-top: 100px;
padding-bottom: 200px;
padding-left: 0px;
}


.navigation ul {margin: 0; padding: 0; list-style-type: none;}

.navigation a {
width: 100%;
padding-top:8px;
padding-bottom:8px;
padding-left:0px;
margin: 0 0 0 0px;
display: block;
font-weight: bold;
background: #333;
color: #E1E4E6;
border-left: 0px #455873 solid;
text-decoration: none;
height: 8px;
font-size: 11px;
border-top: 1px dotted #fff;
}

.navigation li li {padding-left: 0px;}
.navigation li.active a {color: #fff; background: #CB2027;}
.navigation li.active li.active a {color: #66FF66;}
.navigation li.active li.active li.active a {color: #DED1DE;}
.navigation2 li.active li a {color: #fff;}
----------------------------------------------
Die Zeile ".navigation li.active a {color: #fff; background: #CB2027;}" müsste den aktiven Schalter auf "background: #CB2027" bringen. Tut sie aber nicht. Übersehe ich was?