Problem mit Menü (bzgl. "position: fixed")

[Camping_RIDER]

Aloha ;)

Du erkennst sicher auf den ersten Blick was das Problem ist?

Nö ;)

Aber ich wage mal einen educated guess: Das Problem tritt eventuell in allen Navigationsebenen auf, ist aber nur in der ersten sichtbar, da bei den anderen ein overflow:hidden vorliegt.

Oder noch ein educated guess: Das label-Element steht schon in jedem Status über das li hinaus, das wird aber erst beim hovern sichtbar. Das liegt daran, dass nach den von dir geposteten CSS-Regeln das label-Element zunächst einen transparenten Hintergrund hat (eingefärbt ist nur das li) und erst beim hovern Farbe bekommt.

In beiden Fällen solltest du dir vielleicht das box-model nochmal vergegenwärtigen. Für mich verhält sich die width nämlich alles andere als intuitiv. Intuitiv würde ich erwarten, dass außen zuerst margin kommt, dann border, dann die von width vorgeschriebene Breite und dann das padding. Das ist aber nicht so. Width kommt erst ganz innen. Wenn du also ein padding festlegst, dann musst du von der beabsichtigten Elementbreite das padding abziehen, um die width zu erhalten. Oder anders ausgedrückt: in diesem Fall (ohne Border, ohne Berücksichtigung umliegender Elemente) verhält sich padding genauso wie margin!

Wenn ich mehr als educated guesses machen soll, dann reichen die Codefragmente nicht aus ;) dann müsstest du mir das Beispiel live verlinken. Es ist ja auch nie ausgeschlossen, dass es Interferenzen gibt, die in den selektierten Codefragmenten nicht zum Ausdruck kommen. Schließlich ist Wochenende, da bin ich daheim und hab Browser mit Entwicklerwerkzeugen zur Hand :D

Vielleicht noch ein Wort zur Semantik: Das <label><a>...</a></label> ist nicht semantisch sinnvoll. Wozu eine Beschriftung wenn es garnix zu beschriften gibt? Mir ist schon klar, dass du das zu Gunsten der stilistischen Gleichbehandlung von "Text zum Aufklappen" und "Linktext" gemacht hast. Da wäre es aber besser, das Markup nicht zu verbiegen (also einfach nur <a> an diesen Stellen) und die stilistische Gleichbehandlung stattdessen im CSS umzusetzen - entweder, indem du immer label und a ansprichst, oder - vllt. noch besser - indem du allen label und a eine gemeinsame Klasse "navielm" oder so zuweist und diese dann gemeinsam formatierst.

Grüße,

RIDER