Problem mit active in CSS

Deffcon

Guten Abend,

ich bastle gerade an einer HTML Internetseite und habe ein Problem in der Navigationsleiste.

Ich lasse die Links als Block anzeigen und habe am Anfang der Links ein Pfeil-Bild als Background. Das Farbschema und Pfeilbild soll sich ändern beim rüberfahren (hover) und beim anklicken (active).
Der Hover Befehl funktioniert, active aber nicht.
Woran kann das liegen?
Ich poste mal hier den CSS auszug:

.naviMain {
display: block;
padding-left: 20px;
padding-top: 4px;
padding-bottom: 4px;
background-color: #716e6e;
margin-bottom: 10px;
color: #042750;
text-decoration: none;
font-size: 13px;
background-image: url(../images/arrow.jpg);
background-repeat: no-repeat;
}

.naviMain:active {
display: block;
padding-left: 20px;
padding-top: 4px;
padding-bottom: 4px;
background-color: #042750;
color: #716e6e;
margin-bottom: 10px;
text-decoration: none;
font-size: 13px;
background-image: url(../images/arrow-active.jpg);
background-repeat: no-repeat;
}

.naviMain:hover {
background-color: #042750;
color: #716e6e;
background-image: url(../images/arrow-active.jpg);
background-repeat: no-repeat;
}

Die Links in der Navi haben die class naviMain.

Wäre super, wenn da jemand mal drüberschaun könnte.

Danke im voraus.

MFG
Deffcon

Nico D.

Ich wuerde darum bitten, dass du die Code-Tags verwendest, damit dein Code leserlicher wird... Und dann - bzgl. deines Problems- wuerde ich empfehlen, dass du die Reihenfolge aenderst:

.naviMain	{
	display: block;
	padding-left: 20px;
	padding-top: 4px;
	padding-bottom: 4px;
	background-color: #716e6e;
	margin-bottom: 10px;
	color: #042750;
	text-decoration: none;
	font-size: 13px;
	background-image: url(../images/arrow.jpg);
	background-repeat: no-repeat;
}

.naviMain:hover	{
	background-color: #042750;
	color: #716e6e;
	background-image: url(../images/arrow-active.jpg);
	background-repeat: no-repeat;
}

.naviMain:active	{
	display: block;
	padding-left: 20px;
	padding-top: 4px;
	padding-bottom: 4px;
	background-color: #042750;
	color: #716e6e;
	margin-bottom: 10px;
	text-decoration: none;
	font-size: 13px;
	background-image: url(../images/arrow-active.jpg);
	background-repeat: no-repeat;
}