Button bei hover,active gedrückt aussehend halten

Wie soll ich das erklären, der Startseitebutton ist so eingedrückt. Nun soll bei meinem Script der Startseite Button nicht gedrückt sein sondern nur wenn man klickt und danach bevor man zu einer anderen seite wechselt. Ken emich nicht so gut aus und habe schon viel versucht zu ändern aber dads gewünschte ergebnis nicht erhalten. Google hilft mir in meinem speziellen Fall auch nicht weiter. Hier mal mein Code:

Html Code:

<ul id="navi">
		<li id="active"></li><a href="index.php" id="current">Startseite</a></li>
        		<li><a href="index.php">&Uuml;ber uns</a></li>
        		<li><a href="schutz-aktionen.php">Tierschutz und Aktivit&auml;ten</a></li>
       		<li><a href="spenden.php">Unterst&uuml;tzen Sie uns</a></li>
        		<li><a href="kontakt.php">Kontakt</a></li>
    	</ul>

Css-Code

ul#navi {
list-style-type: none;
background: #369;
border-top: 1px solid #9cc;
font: normal 11px consolas, candara, Arial, Helvetica, sans-serif;
margin: 20px 0 0 0;
text-align: center
}
ul#navi li {
display: inline;
position: relative;
bottom: 11px;
line-height: 1.2em;
}
html>body ul#navi li {
background: #000;
margin: 0 3px 0 0;
padding: 4px 0px 4px 0;
}
ul#navi a, ul#navi a:link, ul#navi a:visited {
background: #900;
border: 1px solid #fff;
color: #fff;
cursor: pointer;
display: inline;
height: 1em;
padding: 3px 5px 3px 5px;
position: relative;
right: 2px;
bottom: 2px;
text-decoration: none;
}
ul#navi a:hover {
background: #c00;
bottom: 1px;
color: #fff;
position: relative;
right: 1px;
}
ul#navi a:active {
background: #999;
bottom: 0px;
color: #fff;
position: relative;
right: 0px;
}
ul#navi li#active {
background: #369;
bottom: 13px;
display: inline;
margin: 0 3px 0 0;
position: relative;
}
html>body ul#navi li#active {
background: #000;
margin: 0 4px 0 4px;
}
ul#navi #active a, 
ul#navi #active a:link, ul#navi #active a:visited,
ul #navi #active a:hover {
background: #369;
border-bottom: none;
border-left: 1px solid #9cc;
border-right: 1px solid #9cc;
border-top: 1px solid #9cc;
color: #fff;
cursor: text;
padding: 2px 5px 0 5px;
position: relative;
right: 0;
bottom: 0;
}

Danke für eure Hilfegebung :p

Zitat von threadi

Dein Quellcode in der Zeile der Startseite ist nicht korrekt.

Code

<li id="active"></li><a href="index.php" id="current">Startseite</a></li>

So wäre es richtig:

Code

<li id="active"><a href="index.php" id="current">Startseite</a></li>

Kleiner Exkurs zu Link-Styles: es gibt 5 Pseudoklassen:

link - normale Formatierung
visited - Formatierung wenn der Browser schon die verlinkte Seite aufgerufen hat
hover - wenn man mit der Maus drüber fährt
active - wenn der Link angeklickt bzw. aktiviert wird
focus - wenn der Fokus auf den Link gelegt wird

In deinem Fall musst Du folglich für die Links die Pseudoklasse "active" nutzen um wie Du es sagst

Noch ein Hinweis: achte auf die Reihenfolge der Formatierungsangaben im CSS. Erst die Standard-Formatierung definieren, danach spezielle Formatierungen per Klassen definieren.

Alles anzeigen

Bei Css wäre mir mit einem Stückle Script schon eher geholfen, ich werde versuchen dann das :active mal mit position relative oder absolut dann mit right und bottom zu skalieren. Hoffe mal, ich habe das richtig aufgefasst :p