[Hilfe][HTML & CSS] Jeden zweiten Menüpunkt anders einfärben

Hallo,

folgendes Problem:
Ich will ein Menü links an der Seite erstellen und die Menüpunkte sollen abwechselnd eingefärbt werden, was auch der Fall ist.
Wenn ich die Menüpunkte verschachteln möchte funktioniert das aber nicht so leicht.
Einfacher zu zeigen, als zu erklären:

So sieht es aktuell aus:

HTML:

<ul>
        <li><a href="#">Link 1</a>
            <ul>
                <li><a href="#">VERSCHACHTELT</a></li>
            </ul>
        </li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
        <li><a href="#">Link 5</a></li>
    </ul>

CSS:

li:nth-child(2n) a {
    background-color: #151718;
}

Der Punkt "VERSCHACHTELT" soll nicht heller sein, dafür aber "Link 2", "Link 3" dunkel usw.

MfG

Zitat von Alf21

Habe immer Frameworks bzw. jQuery benutzt. Gibt aber seit CSS3 auch einfachere Methoden: ::nth-child(n) Selector https://css-tricks.com/how-nth-child-works/

//edit um diesen Fehler zu umgehen musst du deine Selection spezifizieren: ul > li::nth-child(2n) a { ... }

//edit das wird denke ich nicht viel ändern, du musst dein Problem oder dein Wünsch besser äußern: willst du alle Listenpunkte der 1. Ebene heller haben oder wie meinst du das: "dafür aber 'Link2','Link3' dunkel usw"?

So sollte es zum Schluss aussehen (mit Photoshop gemacht):

MfG

Zitat von Alf21

So sollte es eigentlich gehen, bin aber gerade am Handy

HTML

<ul class="striped">
<li>
<ul>
<li>..</li>
</ul>
</li>
<li>..</li>
...
</ul>

CSS

ul.striped a:nth-child(2n) { ... } /* das mit der striped klasse ist nur zur spezifikation */

bzw. wenn du die das erste, dritte, fünfte usw. Element editieren willst:
ul.striped a:nth-child(2n+1) { ... } /*2n+1 wäre also bei n(0)=1, n(1)=3,... */

Alles anzeigen

Danke schon mal für deine Bereitschaft mir zu helfen, aber anscheinend funktioniert es noch nicht ganz.
Folgendes wird mir in meinem Browser angezeigt:

HTML:

<ul class="striped">
        <li><a href="#">Link 1</a>
            <ul>
                <li><a href="#">VERSCHACHTELT</a></li>
            </ul>
        </li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
        <li><a href="#">Link 5</a></li>
    </ul>

CSS:

ul.striped a:nth-child(2n) {
    background-color: #151718;
}

Wenn ich deine Antwort nicht falsch verstanden habe, muss ich jeden Menüpunkt einzeln umfärben, oder passt sich die CSS-Formatierung dem HTML-Code an?

MfG