Hallo,
ich habe da ein kleines Problem bei der Erstellung eines CSS basierten Aufklappmenüs.
Wenn man den Code (siehe unten) im Firefox oder Opera betrachtet (woanders habe ich es nicht getestet und das Problem besteht in beiden Browsern), dann stellt man fest das in dem aufgeklappten Menü, der Platz nicht vollständig genutzt wird, dazu kommt das der Inhalt scheinbar rechtsbündig angezeigt wird (daran ändert auch ein text-align:left nichts).
Wenn ich den Inhalt über relative Positionierung nach links verschiebe, habe ich den ungenutzten Raum nur rechts. Das merkwürdige ist, das dieses Problem scheinbar mit der Angabe: position:relative im übergeordneten li Tag, zusammenhängt, wenn ich den Wert auf position:absolute ändere, dann wird zumindest der aufgeklappte Block korrekt dargestellt, wenn man davon absieht das, dass Haupsmenü dann vollkommen zusammenbricht.
Das Problem dabei sind 3 Sachen:
1. Muss das, dem Untermenü übergeordnete, Element (li) eine position Angabe, verschieden von static, besitzen, da sonnst die absolute Positionierung des Untermenüblocks auf den Body bezogen wird.
2. Kann ich für das Haupt li keine absolute Positionierung verwenden, da in meinem Hauptdesign, die Menüpunkte stark unterschiedliche Breite besitzen und damit kein Menü aufbau berechnet werden kann. Wenn ich die breiten der Hauptmenüpunkte festlegen würde könnte ich zwar das Menü konstruieren allerdings würde ich dann die Barrierefreiheit aufgeben, da die Haupt li Elemente dann nicht mehr mit den, möglicherweise von User vergrößerten, Schriftarten mitwachsen.
3. wird in allen Beispielen die ich im Internet gefunden habe, für das übergeordnete li Tag, die relative Positionierung verwendet

Wurde jetzt bisher einfach nur keine Lösung gefunden oder ist das Thema zu uninterresant?
Zumindest scheint es sich um ein systematisches Problem zu handelt, denn sowohl der Firefox als auch der Opera stellen das Menü gleich dar.

Um den Zugang zu dem Problem mal etwas zu erleichtern, habe ich den Code jetzt auf einen Webspace geladen, wo sich das Problem sehr deutlich zeigt.
Wie gesagt der grüne bereich sollte eigentlich nicht zu sehen sein, den Dabei handelt es sich um den ul Container welcher das Untermenü darstellt. der Orange Bereich sind die li Elemente, und diese sollten eigentlich den gesammten ul Container ausnutzen und eigentlich auch linksbündig beginnen.
Ich vermute das sie schon den ganzen bereich nutzen aber leider zu weit rechts beginnen.
Also ist fängt entweder der ul Container zu weit links an und die li-Tags sind korrekt oder umgekehrt.
Hier ist die Testseite
http://test.posthuman.de/test2.html

Du hast die Default-Randabstände nicht auf Null gesetzt.
Leite dein Stylesheet mit * {margin:0; padding:0;} ein.

Außerdem fehlt eine Doctype-Angabe.

Ich glaubs nicht, das wars tatsächlich.
Und welche Werte waren jetzt explizit nicht auf 0 gesetzt?
Also welche Werte haben dies Bewirkt?
Ich frage nur weil ich in meinem Hauptdisign, zumindest immer den div, span, p, img und dem body tags margin und padding 0 zuweise.

Listen haben in allen Browsern unterschiedliche Default-Ränder. Diese hattest du nicht auf Null gesetzt (deine Angabe galt nur für ein einziges ul-Element deines Codes, das erste)

Aja die Listen, hätte ich mir denken können.
Danke für die Antwort, das Problem hat mich schon zeit Wochen beschäftigt.