nicht angemeldet
Hallo miteinander,
ich möchte meine o.g. Website barrierefreier gestalten und wollte für Navigationsleiste Aufzählungslisten benutzen. Reduziert auf wenige Einträg sähe das so aus:
<ul>
<li><a href="#">Adverb</a></li>
<li><a href="#">Artikel</a></li>
<ul>
<li><a href="#">bestimmter Artikel</a></li>
<li><a href="#">partitiver Artikel</a></li>
<li><a href="#">unbestimmter Artikel</a></li>
</ul>
</ul>
Wenn man mit der Maus auf »Artikel« geht, erscheint die untergeordnete Aufzählungsliste (»bestimmter/partitiver/unbestimmter Artikel«), die sonst nicht sichtbar ist. Zudem sind sowohl der Listeneintrag »Artikel« als auch die untergeordnete Aufzählungsliste farblich anders unterlegt. Dies erreichte ich durch:
ul li + ul {display:none;}
ul li:hover + ul, ul li + ul:hover {display:block;}
ul li:hover, ul li:hover + ul, ul li + ul (background-color:#D42240;}
Wenn man jetzt jedoch mit der Maus auf einen Eintrag der untergeordneten Aufzählungsliste (»bestimmter/partitiver/unbestimmter Artikel«) geht, verliert »Artikel« seine veränderte Hintergrundfarbe. Und genau das ist mein Problem. Ich weiß nicht, wie ich den Browsern klarmachen kann: Färbe den Hintergrund von »li« anders, wenn ich mit der Maus über einem »li« im direkt folgenden »ul« bin.
Oder anders: Wie spricht man ein direkt vorangehendes Element an?
Für eure Vorschläge und Ideen danke ich euch herzlich im Voraus.
Grüße
Julius