Markierung des aktiven Navigationsfeldes

[Tino]

Hallo zusammen,

folgender Sachverhalt:
Damit ein User immer weiß, wo auf der Website er sich befindet möchte ich, dass der gerade aktive Naviationspunkt farblich hervorgehoben wird. (Meine Navigation ist eine Liste)

In diesem Zusammenhang habe ich bereits einen Beitrag gefunden, der mich wie ich meine auf den richtigen Weg gebracht hat. Ich habe den Code nach bestem Wissen auf meine CSS angepasst. Leider ohne Erfolg bisher. Was/Wo muss ich noch ändern im folgenden Quellcode?

Auszug aus meiner HTML:
<ul id="navigation">
   <li class="active"><a href="company.html">Unternehmen</a></li>
   <li class="active"><a href="#">Investoren</a></li>
   <li class="active"><a href="#">Kunden</a></li>
   <li class="active"><a href="#">Panel User</a></li>
   <li class="active"><a href="#">Presse</a></li>
</ul>

Mein CSS-Quelltext:
body {
   margin: 0px;
   padding: 0px;
}

div#indexcontainer {
   margin:auto;
   width:1024px;
}

div#indexheader {
   width:1024px;
   height:74px;
}

div#indexheaderlogo {
   width:57px;
   height:56px;
   background-image:url(pics/logo.png);
   margin-left:29px;
   margin-top:9px;
   float:left;
}

div#indexheaderbalken {
   width:906px;
   height:74px;
   background-image:url(pics/header.png);
}

div#indexnavi {
   width:1024px;
   height:27px;
}

div#indexnavinormal {
   width:753px;
   height:27px;
   float:left;
}

ul#navigation  {
   margin: 0px;
   padding: 0px;
   padding-left: 0px;
   margin-left:58px;
   width: 695px;
   height: 27px;
}

#navigation li {
   display: block;
   float: left;
}

#navigation li a{
   margin-top: 0px;
   padding-top: 9px;
   margin-right: 1px;
   display: block;
   background-color: #ededed;
   height: 33px;
   width: 138px;
   text-align: center;
   font-family: verdana;
   font-size:12px;
   color: #514c4c;
   text-decoration: none;
   -moz-border-radius:5px;
   -khtml-border-radius:5px;
}

#navigation li a:hover{
   background-color: #f38628;
}

div#indexnavimarkenspecial {
   width:138px;
   height:27px;
}

ul#markenspecial  {
   margin: 0px;
   padding: 0px;
   padding-left: 0px;
   margin-left:69px;
   width: 138px;
   height: 27px;
}

#markenspecial li {
   display: block;
   float: left;
}

#markenspecial li a{
   margin-top: 0px;
   padding-top: 9px;
   margin-right: 0px;
   display: block;
   background-color: #f7d3bc;
   height: 33px;
   width: 138px;
   text-align: center;
   font-family: verdana;
   font-size:12px;
   color: #514c4c;
   text-decoration: none;
   -moz-border-radius:5px;
   -khtml-border-radius:5px;
}

#markenspecial li a:hover{
   background-color: #f38628;
}

div#linecontainer {
   width:1024px;
   height:12px;
}

div#line {
   width:905px;
   height:12px;
   background-image:url(pics/line.png);
   margin-left:58px;
   background-repeat: no-repeat;
}

div#indexcenter {
   width:1024px;
   height:470px;
   background-image:url(pics/indexcenter.png);
}

div#indexfooter {
   width:1024px;
   height:197px;
   background-image:url(pics/indexfooter.png);
}

div#companycontainer {
   margin:auto;
   width:1024px;
}

div#companycenter {
   width:1024px;
   height:467px;
   background-image:url(pics/companycenter.png);
}

div#companyfooter {
   width:1024px;
   height:195px;
   background-image:url(pics/companyfooter.png);
}

.active {
   color: #f38628;
   cursor: default;
}

Ende des Quelltexts. Bin für jede Hilfe oder Anregung dankbar!