@@Paulaskatze
Dein Markup stimmt so nicht.
<div id="menu">
Statt div sollte es hier ein nav-Element sein.
<ul> <li><a href="...">Link1</a> </li> <li><a href="...">Link2</a> </li> <ul> <li><a href="...">Link2a</a> </li> <li><a href="...">Link2b</a> </li> </ul>
ul (die äußere Liste) darf nur li-Elemente (sowie script und template) als Kindelemente enthalten, nicht aber ul (die inne Liste). Letzteres muss in das li-Element geschachtelt werden:
<nav id="menu">
<ul>
<li><a href="...">Link1</a>
</li>
<li><a href="...">Link2</a>
<ul>
<li><a href="...">Link2a</a>
</li>
<li><a href="...">Link2b</a>
</li>
</ul>
</li>
<li><a href="...">Link 3</a>
</li>
</ul>
</nav>
Die Klassenbezeichnung "active" ist unglücklich gewählt, da sie an die CSS-Preudoklasse ':active' erinnert, die etwas ganz anderes tut. Besser wäre "selected" oder "current".
Der Menüpunkt der aktuellen Seite sollte aber gar kein Link sein: „Verlinke niemals auf die aktuelle Seite.“ (Punkt 10 der zehn meist-missachteten Homepage-Design-Richtlinien [Nielsen])
Statt eine Klasse hinzuzufügen kannst du bei dem entsprechenden a-Element einfach das href-Attribut weglassen. (Dafür evtl. tabindex="0" aria-describedby="aktuelle Seite" setzen[1], siehe The Accessible Current Page Link Conundrum.)
Dann kannst du alle Menüpunkte mit '#menu a' stylen und alle diejenigen, die Links sind (also alle bis auf den Menüpunkt der aktuellen Seite) mit '#menu a[href]' oder in modernen Browsern mit '#menu a:any-link'.
#menu a {
text-decoration: none;
color: #ff3700;
}
#menu a:any-link {
color: black;
}
Oder andersrum – was vielleicht intuitiver ist – alle Menüpunkte mit '#menu a' und den der aktuellen Seite mit '#menu a:not(:any-link)'.
#menu a {
text-decoration: none;
color: black;
}
#menu a:not(:any-link) {
color: #ff3700;
}
BTW:
#menu a { text-decoration: none; } #menu a:link { color: black } #menu a:visited { color: black; }
Wenn du schon besuchte und noch nicht besuchte Links gleich stylen willst, macht es keinen Sinn, das getrennt für 'a:link' und für 'a:visited' anzugeben. Sondern einfach für 'a', wie ich das oben gemacht habe.
LLAP 🖖
„Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
„Hat auf dem Forum herumgelungert …“
(Wachen in Asterix 36: Der Papyrus des Cäsar)
berichtigt; vorher stand hier fälschlicherweise
tabindex="1"↩︎