Schrift wird unterschiedlich dargestellt

[Auge]

Hallo

Bei der Navigation der Beispielseite fiel mir auf, dass beim Hovern mit der Maus zwar der ganze Listenpunkt farblich hinterlegt wird, aber der Link nur in der Höhe der Schrift, wen auch in der gesamten Breite des Menüpunkts, anklickbar ist. Ich würde als Benutzer erwarten, die gesamte Fläche des Menüpunkts nutzen zu können.

was meinst du damit? Wenn ich auf die Beispielseite gehe, dann den Punkt Leistung 2 wähle, kann ich entweder auf die Schrift klicken oder hinten in den grauen Bereich.

Korrekt mit „Aber“. Vorausgeschickt sei, dass ich das mit dem FF34.0.5 und im Chromium38 gesehen habe. Ich kann, wie du es selbst beschreibst, die Links zwar über die ganze Breite aber nicht über die ganze optische Höhe des Menüpunkts nutzen. Ober- und unterhalb der line-height wird der Menüpunkt zwar grau hinterlegt – weshalb ich annehmen würde, dass ich dort auch den Link klicken kann – der Link ist in diesem Bereich aber nicht da, also nicht klickbar.

Das liegt am padding, das du den Listenelementen mitgibst. Nimmst du diese Angaben dort weg (padding: 0;) und fügst sie stattdessen den Links hinzu, ist die gesamte Fläche der Links anklickbar.

Tschö, Auge