Suckerfish CSS done right!

Vor ein paar Tagen wollte ich ein modernes HTML-Submenü bauen, welches aufklappt, wenn man mit der Maus über einen Menüpunkt fährt.

Auf diversen Seiten habe ich gesehen, dass viele diese Technik mit JavaScript realisieren. Ich finde das übertrieben, da sich dieser Effekt auch mit der CSS „hover“-Eigenschaft für Listenelemente lösen lässt (Stichwort: Suckerfish CSS). Das funktioniert aber nur in aktuellen Browsern.

Der Internet Explorer 6 unterstützt die „hover“-Eigenschaft nämlich nur für Anker. Wie ich leider feststellen musste, gibt es noch weitere Besonderheiten die man beachten muss. Nach 2 Stunden Arbeit habe ich dann aber einen Code entwickelt, der barrierefrei (ohne den Einsatz von display:none und visibility:hidden) ist und problemlos in Firefox und Internet Explorer 6-7 funktioniert (andere Browser wurden nicht getestet).

Screenshot:

Suckerfish CSS done right! weiterlesen