Thorsten S.: Wo ist der Fehler?

Beitrag lesen

OK ... Ich hatte mir einen Deiner Texte, den zur Positionierung, bereits angesehen. Ich hatte auch gedacht, dass ich das soweit verstehen. Da ich aber nicht zum gewünschten Ergebnis komme, muss es bei mir einen Denkfehler, ein Missverständnis, eine Unwissenheit geben. Ich weiß aber nicht, wo. Deshalb hier mal einige Gedanken von mir, vielleicht kann mir ja jemand zeigen, was daran nicht stimmt:

Die horizontalen Listenelemente haben ein position: relative, damit die mit position: absolute positionierte, vertikale Liste an dem horizontalen Listenelement ausgerichtet wird, in das sie eingebettet ist.

Das klappt auch wunderbar. Wenn ich der eingebetteten Liste ein background-color gebe, sehe ich, dass der linke Rand der vertikalen Liste mit dem linken Rand des horizontalen Listenelements zusammenfällt.

Was ich nicht verstehe ist, warum der linke Rand der Liste nicht mit dem Text der vertikalen Listenelemente zusammenfällt. Woher kommt dieser 40px große Innenabstand?

Absolute Positionierung bedeutet, dass man Elemente relativ zu ihren Elternelementen positioniert. Wenn ich der absolut positionierten Liste ein left: 10px, top: 10px; gebe, dann müsste diese Liste 10px rechts von und 10px unterhalb der linken oberen Ecke des Elternelements beginnen.

Das klappt jedoch nicht. left: ... und top: ..., die ich der vertikalen Liste gebe, werden nicht umgesetzt. Ein left: -40px; funktioniert zwar beim Selektor li:hover ul, nicht aber beim Selektor li ul. Aber siehe oben: Mein eigentliches Problem besteht darin, dass ich nicht verstehe, warum ich überhaupt die -40px vergeben muss ...