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?