[HTML/CSS] Elemente aus dem Container fliessen lassen

[alcaeus]

Hallo ihr,

ich stehe vor einem kleineren Problem. Ich habe folgenden HTML-Code:

Code:

<ul id="menu">[*]
    Foobar
    <ul>[*]Blabla[*]More Blabla[*]Even more Blabla[/list]  [*]Foobar[*]Foobar[/list]

Die Liste zwinge ich mit folgendem CSS-Code, wie ein horizontales Menue auszusehn:

Code:

#menu {
  list-style-type:none;
}
#menu li {
  float:left;
}

Die Subliste ist per default ausgeblendet, wird aber eingeblendet, sobald man mit der Maus ueber das Element faehrt:

Code:

#menu li ul {
  display:none;
}
#menu li:hover ul {
  display:block;
}
#menu li li {
  float:none;
}

Mein Problem ist jetzt, dass das li-Element in der horizontalen Liste sich an die Breite der Subliste anpasst, sobald ich mit der Maus drueberfahr. Ich hab schon versucht, mit overflow:visible zu arbeiten, das funktioniert aber nur, wenn man eine Breite notiert. Hat jemand vielleicht eine Idee, wie ich den Effekt vermeiden kann?

Greetz
alcaeus

[maxmax]

könntest du vllt mal ein sreenshot hier reinstellen???
dan könnte ich dir vllt helfen, da ich dein problem nicht ganz verstehe...

[Phoenix]

Versuch mal style="overflow:visible !important" zu deklarieren.

[alcaeus]

Zitat von maxmax:

könntest du vllt mal ein sreenshot hier reinstellen???
dan könnte ich dir vllt helfen, da ich dein problem nicht ganz verstehe...

Besser: http://files.alcaeus.org/temp/menu.html

Der erste Menuepunkt hat ein Submenu, einfach mal drueberfahren (aber bitte nicht im IE6)

Greetz
alcaeus

[3_of_8]

Hmm, ich glaube fast, dass das nur mit fester Breitenzuweisung oder JavaScript geht. Ich wüsste keine andere Möglichkeit. (BTW, du solltest noch sowas wie li {list-style-type: none;} einfügen, weil bei manchen Listenelementen noch ein Bullet angezeigt wird)

[alcaeus]

Habs jetzt hingekriegt.

Die li-Elemente im Menue muessen mit position:relative positioniert werden. Die Listen des Submenus kriegen dann noch ein position:absolute sowie geeignete Werte (z.B. top:100%; left:0), und dann gehts. Das position:relative ist noetig, damit position:absolute von genau dem Element aus rechnet.

Greetz
alcaeus

[3_of_8]

*kratz*

Heißt das, du musst immer noch individuell die left-Werte angeben?

[alcaeus]

Nein, den left-Wert nicht, aber den top-Wert musst du setzen

Greetz
alcaeus

[3_of_8]

Und wieso wird dann das Parent-li nicht wieder "gedehnt", wenn das Menü ausgeklappt wird?

[alcaeus]

Weil absolut positionierte Elemente komplett aus dem Document-Flow ausgeschlossen werden

Greetz
alcaeus