Im Menü nur aktiven Menüpunkt farbig, nicht die Untermenüpunkte

[Gunnar Bittersmann]

@@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 🖖

---

1. berichtigt; vorher stand hier fälschlicherweise tabindex="1" ↩︎