✔ Aktuellen Menüpunkt mit anderer Farbe

dwex

dwex

Erfahrenes Mitglied
Hallo Leute,

ich bin total am verzweifeln weil ich was vermeindlich leichtes absolut nicht hinbekomme.
Ich probiere nun schon seit Stunden verschiedenste Varianten aus und ich komme einfach nicht drauf wie ich das machen soll - es ist zum Haare ausraufen.

Ich habe eine ganz einfach horizontale Navigation welche ich so gestalte:
HTML: 
<div id="topnavigation">
    <ul class="menu-top">
        <li class="menu-sibling menu-first">
            <a href="./home.php" target="_top">Home</a>
        </li>
        <li class="menu-current menu-middle">
            <a href="./tippspiel.php" target="_top">Tippspiel</a>
        </li>
        <li class="menu-last">
            <a href="./kontakt.php" target="_top">Kontakt</a>
        </li>
    </ul>
</div>
CSS: 
#topnavigation {
	margin: 10px 20px 0px 150px;
}

#topnavigation ul {
	padding: 0px;
	margin: 0px;
}

#topnavigation li {
	list-style-type: none;
	float:right;

}

#topnavigation a:link, #topnavigation a:visited, #topnavigation a:active {
	padding: 3px 10px 0px 5px;
/*	text-shadow: #c0c0c0 2px 2px 3px;*/
	display: block;
	color: gray;
	text-decoration: none;
	font-weight: bold;
}
#topnavigation a:hover {
	color: #df544a;
	/*text-shadow: #c0c0c0 2px 2px 3px;*/
	text-decoration: none;
	font-weight: bold;
}

// habe das probiert
#topnavigation .menu-current {
	color: red;
}

// und das
.menu-current {
	color: red;
}

/und das
#topnavigation ul li.menu-current {
	color: red;
}

// um nur ein paar zu nennen

Es geht mir jetzt um die Klasse menu-current. Egal wie ich es in meinem CSS notiere - der aktuell ausgewählte Menüpunkt (im Beispiel "Tippspiel") wird einfach nicht rot markiert.

Bitte bitte helft mir zu meiner Lösung - ich bin am verzweifeln.
 
Danke für die Ohrfeige - ich gelobe Besserung.

Das verlinke Beispiel hat mir zwar weitergeholfen auf meinen Lösungsweg - jedoch funktionierte es bei mir nicht wie dort beschrieben.

Nach der Beschreibung hätte ich folgendes machen müssen:
CSS: 
ul#topnavigation li.menu-current a:link,
ul#topnavigation li.menu-current a:visited {
color:red;
}
Das funktionierte jedoch leider nicht - deshalb habe ich folgendes gemacht:
CSS: 
#topnavigation ul li.menu-current a:link,
#topnavigation ul li.menu-current a:visited {
color:red;
}
das funktioniert bestens.
 
dwex hat gesagt.:
Danke für die Ohrfeige - ich gelobe Besserung...
Zum Vergrößern anklicken....
... so brutal wollte ich eigentlich nicht vorgehen. :)
Aber es freut mich, wenn du das Problem lösen konntest. Offensichtlich gab es Probleme mit der Spezifität - aber wo die liegen kann ich auch jetzt nicht am obigen Quelltext erkennen.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück