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

[Paulaskatze]

Liebes Forum,

in meinem Menü soll der aktive Menüpunkt orange sein. Mit

#menu ul li ul li.active a {
    color: #ff3700;
}

wird nur der Untermenüpunkt "Link 2a" angesprochen, mit

#menu ul li.active a {
    color: #ff3700;
}

werden beim Klick auf "Link 2" natürlich auch die Untermenüpunkte "Link 2a+b" orange.

Was muss ich im CSS ändern, damit beim Anklicken jeweils "Link 2" oder "Link 2a" die Farbe ändern? Ich stehe einfach auf dem Schlauch...

Vielen Dank für eure Hilfe!

<div id="menu">
   <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>
      <li><a href="...">Link 3</a>
      </li>
   </ul>
</div>

#menu {
    position: absolute;
    margin-top: 200px;
    font-size: 1.5em;
    width: 7em;
    float: left;
    margin-left: 70px;
}
#menu ul {
    list-style-type: none;
}
#menu ul ul {
    font-size: 0.7em;
    margin-left: 2em;
}
#menu a {
    text-decoration: none;
}
#menu a:link {
    color: black
}
#menu a:visited {
    color: black;
}
#menu ul li ul li.active a {
    color: #ff3700;
}

[Reinhard]

Hey,

in meinem Menü soll der aktive Menüpunkt orange sein.

#menu ul li.active a {
    color: #ff3700;
}

werden beim Klick auf "Link 2" natürlich auch die Untermenüpunkte "Link 2a+b" orange.

Was muss ich im CSS ändern, damit beim Anklicken jeweils "Link 2" oder "Link 2a" die Farbe ändern?

Wie wärs mit

#menu ul li.active > a {
    color: #ff3700;
}

(Den Focus auf das ">")
Bitte verzeih, dass ich um diese Uhrzeit keinen Nerv mehr habe, um dir den Wiki-Artikel zu verlinken, aber bei CSS unter Selektoren solltest du fündig werden.

Reinhard

[Paulaskatze]

Lieber Reinhard, vielen Dank! Den Artikel kenne ich sogar, aber irgendwie stand ich auf dem Schlauch.

[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" ↩︎