Dropdown Menü im IE8 und älter

Die Zeiten ändern sich.

Dieser Beitrag scheint älter als 5 Jahre zu sein – eine lange Zeit im Internet. Der Inhalt ist vielleicht veraltet.

In älteren Internet Explorer Versionen gibt es diverse Probleme mit der Darstellung von Dropdown Menüs, die nur auf CSS basieren. Wenn das Menü mehr als zwei Unterebenen hat, werden diese dritten, vierten usw. Ebenen bis zum IE8 alle dargestellt, wenn man über einen Oberpunkt in der ersten Unterebene hovert. Das ist so natürlich nicht gewünscht und kann auf einigen Umwegen korrigiert werden.
Dafür benötigen wir zuerst in der HTML Datei zwischen den HEAD-Tags den Code für ein alternatives Stylesheet (conditional stylesheet), das für IE8 und älter gilt:

<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" href="/ie.css">
<![endif]-->

Nun müssen wir uns kurz Gedanken machen, wie wir das Problem am Besten lösen können. Es liegt nahe, die übernächste und darauf folgenden Ebenen zu verstecken, wenn der Cursor über einen Listenpunkt bewegt wird. Gleichzeitig muss die nächst tiefere Ebene sichtbar gemacht werden. Das lösen wir mit visibility und opacity, da wir in dem Artikel Dropdown Menü mit CSS3 ebenfalls damit gearbeitet haben. Der CSS Code sieht dann so aus:

#nav li ul li ul li,
#nav li ul li:hover ul li ul li,
#nav li ul li ul li:hover ul li ul li,
#nav li ul li ul li ul li:hover ul li ul li{
    visibility:hidden;
    opacity:0;
}
#nav li ul li:hover ul li,
#nav li ul li ul li:hover ul li,
#nav li ul li ul li ul li:hover ul li{
    visibility:visible;
    opacity:1;
}

Es ist ein wenig umständlich, aber wenigstens funktioniert es so im IE7 und 8. Wenn noch mehr Ebenen hinzukommen, müssen einfach die CSS Anweisungen entsprechend dem Muster angepasst werden.
Falls es auch Probleme mit dem z-index gibt, kann ich auf diesen sehr hilfreichen Artikel von Katja Deutschmann verweisen.

Das könnte auch interessant sein

Schreib einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.