Zitat:
Zitat von Varru
Der wichtigste Unterschied der mir aufgefallen ist, dass du dem Untermenü-ul statt display:block; ein display:inline-block; verpasst hast. Das bewirkt scheinbar den ganz entscheidenden Punkt.
|
Ja genau, der Rest ins Feintuning.
Zitat:
Doch es gibt noch ein paar Dinge, die mir nicht klar geworden sind. Warum löst du das Aus- & Einblenden der Unterpunkte durch Positionieren ausserhalb bzw. innerhalb des viewports?
|
Das ist, damit Screenreader das vorlesen können. Jemand der blind ist, kann ja nicht die Maus bewegen um ein hover auszulösen. Wenn das aber auf display:none gestellt wird dann wird das auch nicht vorgelesen und ist somit für diese Personen ein Hindernis.
Einschränkungen gibt es zudem auch bei touchscreens, da sollte man sich dann noch was anderes einfallen lassen, aber ich hatte das jetzt mal als Übung betrachtet.
Zitat:
Und dann noch das li:after { clear:both; }. Welches Element reagiert auf diese Anweisung? Ich vermute alle nachfolgenden ausserhalb des Menüs, konnte es mir aber selber nicht beweisen.
|
Ja damit es keinen Salat gibt. Daher auch der Z-Index, damit das runterfallende Menü nachfolgende Elemente überdeckt.
Zitat:
Könntest du deinen css-Code für mich kommentieren, um Licht ins Dunkel zu bringen? Die Lösung ansich ist schon mal gut, aber wenn ich's auch noch vollständig verstehen würde, wäre es natürlich perfekt.
|
Baue es nach, Stück für Stück ohne hover und ohne das rausschieben des Untermenüblockes aus dem Viewportbereich, dann wird dir einiges klarer. Fange ohne CSS an und dann nacheinander die Regeln in der Reihenfolge einsetzen wie ich sie runtergeschrieben habe, dann siehst du die Effekte die passieren. Vom anfänglichen zentrieren bis zum Einfärben des ausklappbaren Blockes(eigentlich das KInd UL).