Menübaum in dynamischem DIV

[Frank Fraggle]

Ich habe hier einen dynamisch generierten Menübaum, der sich in einem DIV befindet,
dessen Größe sich anpassen lässt. Per overflow werden dem DIV Scrollbalken hinzugefügt,
wenn das Menü für den DIV-Bereich zu groß wird.
Hier der Code (der Übersicht halber etwas vereinfacht):

  
<div style="overflow:auto">  
  <ul>  
    <li><div style="float:left"/><a>Menüpunkt Ebene 1</a>  
      <ul>  
        <li><div style="float:left"/><a>Menüpunkt Ebene 2</a>  
	  <ul>  
	    <li><a>Menüpunkt Ebene 3</a>  
	    </li>  
	  </ul>  
	  <ul>  
	    <li><a>Menüpunkt Ebene 3</a>  
            </li>  
	  </ul>  
	</li>  
	<li><div style="float:left"/><a>Menüpunkt Ebene 2</a>  
	  <ul>  
	    <li><a>Menüpunkt Ebene 3</a>  
	    </li>  
	  </ul>  
	</li>  
      </ul>  
    </li>  
  </ul>  
</div>  

So sieht es dann aus:

Menüpunkt Ebene 1
   Menüpunkt Ebene 2
      Menüpunkt Ebene 3
      Menüpunkt Ebene 3
   Menüpunkt Ebene 2
      Menüpunkt Ebene 3

FF zeigt den Menübaum unverändert an (abgeschnitten) egal welche größe das DIV hat.
So wie es ursprünglich gedacht war.

IE7, Opera und Safari hingegen zerlegen das Menü beim Verkleinern des DIVs.
Jedes der HTML-Elemente eines Menüeintrags wird in eine separate Zeile umgebrochen.
Der Menübaum sieht dann ungefähr so aus:

Menüpunkt Ebene 1

Menüpunkt Ebene 2

Menüpunkt Ebene 3

Menüpunkt Ebene 3

Menüpunkt Ebene 2

Menüpunkt Ebene 3

Eigentlich ein logisches Verhalten, da ich ja Blockelemente im Menübaum einsetze.
Nur leider nicht im Sinne des Erfinders...

Kann ich das Ganze mit CSS irgendwie hinbiegen oder habe ich mit meiner Struktur verloren?

[Beat]

<div style="overflow:auto">
  <ul>
    <li>
      <div style="float:left"/>
      <a>Menüpunkt Ebene 1</a>
      <ul>
        <li>
          <div style="float:left"/>
          <a>Menüpunkt Ebene 2</a>
        </li>
      </ul>
    </li>
  </ul>
</div>

  

> Eigentlich ein logisches Verhalten, da ich ja Blockelemente im Menübaum einsetze.  
> Nur leider nicht im Sinne des Erfinders...  
  
Die Frage ist, warum versuchst du eine Einrückung via float zu erreichen, statt mit herkömmlichem padding-left für <li>.  
Eine Sondereinrückung (auch negativ) erreichst du mit text-indent.  
Du gibst ja mit float dem Browser die Gelegenheit, Platz durch um=unterbruch zu sparen, was du offenbar nicht willst.  
  
mfg Beat

-- 

><o(((°>           ><o(((°>  

   <°)))o><                     ><o(((°>o  
Der Valigator leibt diese Fische

[Frank Fraggle]

Hätte ich vieleicht noch hinzufügen sollen:
Eingerückt werden die Menüpunkte per margin-left.

Die DIVs vor einem Menüpunkt werden zum Ein- und Ausblenden von Unterebenen verwendet.

Neben FF macht es Chrome noch wie gewollt.
Die restlichen Browser verhalten sich zwar logisch, aber nicht wie gewollt...

[ChrisB]

Hi,

Hätte ich vieleicht noch hinzufügen sollen:
Eingerückt werden die Menüpunkte per margin-left.

Und das Floating dient dann wozu?

Die restlichen Browser verhalten sich zwar logisch, aber nicht wie gewollt...

Dann setze das Gewollte doch mit Logik um ;-)

MfG ChrisB

[Frank Fraggle]

Das Floating erlaubt es das DIV vor dem LI zu positionieren.
DIV ist ja schließlich ein Blockelement.

[ChrisB]

Hi,

Das Floating erlaubt es das DIV vor dem LI zu positionieren.
DIV ist ja schließlich ein Blockelement.

Und wer zwingt dich, dort ein solches einzusetzen?

Mir ist noch nicht ganz klar, wie das ganze letztendlich aussehen soll.

MfG ChrisB

[Frank Fraggle]

Gezwungen hab ich mich dazu selbst.
Aussehen tut das Ganze eigentlich wie ein Menübaum, den man beispielsweise auch im Windows Explorer findet. Das DIV enthält dabei je nach sichtbarkeit der Unterebene ein + oder ein - zum ein- bzw. ausblenden.