Horizontale Navigation mit 2 Ebenen

[Cray]

Hi,

ich habe eine horizontale Navigation welche auf einer Liste (<ul>) basiert.
Die Hauptpunkte befinden sich auf der ersten Ebene. Jeder Hauptpunkt hat jedoch noch weitere Unterpunkte.

Ein Problem ist nun, dass die unteren Ebenen immer angezeigt werden, auch wenn sie nicht aktiv sind.
Dieses Problem konnte ich durch display:none beheben.

Das größte Problem ist aber, dass die Unterpunkte versetzt angezeigt werden und die Hauptpunkte in die Länge ziehen.

So sieht es momentan im Code aus:

<ul id="navmain">
<li>Hauptpunkt</li>
<li>Hauptpunkt</li>
<li>Hauptpunkt
<ul id="submenu">
<li>Unterpunkt</li>
<li>Unterpunkt</li>
<li>Unterpunkt</li>
<li>Unterpunkt</li>
</ul>
</li>
<li>Hauptpunkt</li>
<li>Hauptpunkt</li>
</ul>

Ich würde jetzt gerne die Navigation optisch von einander trennen, damit die Unterpunkte die Hauptpunkte nicht mehr beeinflussen und ganz links anfangen.

In etwa so:

|Hauptpunkt|Hauptpunkt|Hauptpunkt|Hauptpunkt|Hauptpunkt|
|Unterpunkt|Unterpunkt|Unterpunkt|Unterpunkt|Unterpunkt|

Momentan sieht es so aus:

|Hauptpunkt|Hauptpunkt|Hauptpunktxxxxxxxxxxxxxxxxxxxxxx|Hauptpunkt|Hauptpunkt|
xxxxxxxxxxxxxxxxxxxxxxx|Unterpunkt|Unterpunkt|Unterpunkt|

[threadi]

Ich vermute (!) Du hast im CSS absolute Positionierung verwendet damit das Untermenü dort unten steht?! Dann vermute (!) ich, dass es genügen würde, wenn Du "position: relative;" an das alleroberste <ul> hängst.

[Cray]

Hi,

ich habe es gelöst, indem ich dem unteren Menü ein "position: absolute;" und "left:0" gegeben habe. Im Grunde wie von dir gesagt, nur andersrum