Navogation: aktive Seite hervorheben / Wo ist der Fehler?

Hallo,
bin am suchen, wo in meinem Code der Fehler steckt!?!
Ich möchte gerne, dass die aktiv angezeigte Seite in der Navigation einen andersfarbigen Button hat und dieser stehen bleibt, solange die Seite geöffnet ist.
Die Befehle hover und aktive funktionieren.

Hier der HTML-Code

 <ul id="navigation">    
    <li id="home"><a href="./home.htm">Home</a></li>  
    <li id="bandx"><a href="./bandx.htm">BandX</a></li>  
    <li id="events"><a href="./events.htm">Events</a></li>
    <li id="sounds"><a href="./sounds.htm">Sounds</a></li>
    <li id="download"><a href="./download.htm">Downloads</a></li>
    <li id="fotos"><a href="./fotos.htm">Fotos</a></li>
    <li id="gaestebuch"><a href="./gaestebuch.htm">Gästebuch</a></li>
    <li id="kontakt"><a href="./kontakt.htm">Kontakt</a></li>
    <li id="links"><a href="./links.htm">Links</a></li>
    <li id="impressum"><a href="./impressum.htm">Impressum</a></li>
  </ul> 

und das CSS

ul#navigation {
	list-style: none;
	margin: 0px;
	padding:0px;
}			

ul#navigation li {
	list-style: none;
	float: left;		
}  

li#home a {
	margin-left: 4px;
	margin-bottom: 2px;
	margin-right: 0px; 
	margin-top: 2px;		
	padding: 0px;
	width: 100px;
	height: 30px;
	display: block;
	background-image: url(bilder/button_100_rot.gif);
	background-repeat: no-repeat;
	color: #403c34;
	text-decoration: none;
	line-height: 35px;
	text-align: center;  
	font-size: 14px;
	font-weight: bold;
		  }

li#home a:hover {
	background-image: url(bilder/button_100_blau.gif);  
	background-repeat: no-repeat;
	font-weight: bold;
	margin-left: 4px;
	margin-bottom: 2px;
	margin-right: 0px; 
	margin-top: 2px;	
	padding: 0px;
	width: 100px;
	height: 30px;
	display: block;
	color: #d1c1a8;
	text-decoration: none;
	line-height: 35px;
	text-align: center;
	text-indent: inherit;
	font-size: 14px;	
	  }
	  
li#home a:active {
	background-image: url(bilder/button_100_blau.gif);  
	background-repeat: no-repeat;
	font-weight: bold;	
	margin-left: 4px;
	margin-bottom: 2px;
	margin-right: 0px; 
	margin-top: 2px;	
	padding: 0px;
	width: 100px;
	height: 30px;
	display: block;
	color: #d1c1a8;
	text-decoration: none;
	line-height: 35px;
	text-align: center;
	text-indent: inherit;
	font-size: 14px;	
	  }
	  	  	  
li#home a:hover,li#home a:active, li#home_aktuell a {
    background-image: url(bilder/button_100_blau.gif);  
	background-repeat: no-repeat;
	font-weight: bold;
	margin-left: 4px;
	margin-bottom: 2px;
	margin-right: 0px; 
	margin-top: 2px;	
	padding: 0px;
	width: 100px;
	height: 30px;
	display: block;
	color: #d1c1a8;
	text-decoration: none;
	line-height: 35px;
	text-align: center;
	text-indent: inherit;
	font-size: 14px;		
	  }
       

Würde mich freuen, wenn hier mal ein Experte draufschauen könnte.

Viele Dank!

Gruß Geli

Hallo Jörg,
ganz ehrlich - ohne Deine Hilfe hätte ich es noch NIE geschafft, eine Seite fertig zu kriegen.

VIELEN DANK!!!!
Passt jetzt!!!

Ich stehe noch ziemlich am Anfang bei diesem Projekt und hoffe, dass es nicht allzu schlimm wird mit meiner Fragerei!

Hätte ich die Macht, Preise für die "besten Internet-Hilfe-Foren" zu vergeben, würde ich hier sofort den 1. Preis platzieren!

Grüsse
Geli