CSS Hover Effekt nur bei Level_1 Menüpunkt

[BrainStormer]

Hallo an alle,
ich habe eine kleine, wahrscheinlich ziemlich einfache Frage. Ich habe bei mir im Menü ein Hover Effekt in den Menüpunkten. Ich will das dieser Hover Effekt aber nur bei dem Level_1 Menü geschieht. Zur Zeit klappt dann das Menü auf und wenn ich dann z.b. über ein Level_2 Element gibt es auch diesen Hover Effekt. Dieser soll ausschließlich aber nur bei den Level_1 Menü geschehen.
Anbei Mein zurzeitiger CSS Code:

#header .mainnavi .level_1 a:hover,
#header.mainnavi .level_1 span.active:hover,
#header .mainnavi .level_1 span.forward.first:hover {
    background-color: #6E6E6E;
    color: #$mainC;
    transition: 1s;
    border-radius: 10px;

}

Hat da jemand ein Tipp wie man das am einfachsten gestaltet?

Lg Andi

[tl_richard_user]

.level_1 > li > a:hover

[BrainStormer]

Jap, hab ich jetzt auch endlich verstanden. Danke, da war ich grad voll auf dem Kopf gefallen.

LG

[Andreas]

Nur nochmal zu Klarstellung. Der Selektor

.mainnavi .level_1 a

bringt gar nichts. Da kann man genauso gut

.mainnavi a

nehmen (außer dass dann die Skiplinks mit dabei sind welche außerhalb von der UL liegen).

.level_1 a

heißt alle "a" unterhalb von ".level_1". Da sind die von "level_42" natürlich auch mit dabei, weil die auch unterhalb sind.

Deswegen

.mainnavi .level_1 > li > a

: Direktes Kind "li" von ".level_1" und direktes Kind "a" von "li" - keine [Ur]Enkelkinder.

Man kann aber durchaus

.level_1 a

bzw.

.mainnavi a

besser

.mainnavi li a (ohne Skiplinks)

nehmen um erstmal Grundeinstellungen für alle As zu setzen und dann erst mit

.level_2 a

die Unterschiede der tieferen Level herausarbeiten.

[BrainStormer]

Hallo Andreas,
danke für deine Super erklärung, hab ich jetzt erst gelesen. Da ich mir das alles selber beibringe hänge ich an der einen oder anderen Stelle gerne. Und so eine Aufstellung wie du sie gemacht hast ist wirklich perfekt. Das sollten alle lesen, die sich damit auseinandersetzen.

Danke!