Probleme mit geteilten Navigationsleisten

[cedros]

Ich versuche seit knapp zwei Tagen geteilte Navigationsleisten hinzubekommen, wie sie hier beschrieben werden: http://de.selfhtml.org/css/layouts/navigationsleisten.htm#ebenen (das 2. Beispiel, etwas runterscrollen)

Allerdings geht das ganze bei mir über drei Ebenen (ist aus dem Standard Wordpress-Theme heraus modifiziert).

Stylesheet sieht im Moment so aus:

#sidebar {
 position: absolute;
 top: 0px;
 left: 0px;
 width: 600px;
 border: 1px solid black;
 background-color: silver;
 }

#sidebar div {
 clear: left;
 }

#sidebar ul, #sidebar ul ol {
 margin: 0;
 padding: 0;
 text-align: left;
 }

#sidebar ul li {
 list-style-type: none;
 list-style-image: none;
 margin: 10px;
 width: 600 px;
 float: left;
 position: relative;
 }

#sidebar ul li ul {
 margin: 0;
 padding: 0;
 text-align: left;
 }

#sidebar ul li ul li {
 float: left;
 position: relative;
 width: 150 px;
 }

#sidebar ul li ul li ul {
 position: absolute;
 top: 5px;
 left: 5px;
 }

#sidebar ul li ul li ul li {
 float: none;
 display: block;
 margin-bottom: 0px;
 margin-right: 20px;
 }

Das größte Problem ist erstmal, dass die width-Angabe in der zweiten Ebene ignoriert wird. Ich komm einfach nicht dahinter, warum das so ist!?
Da die Texte der dritten Ebene länger sind, als die der zweiten, macht der Firefox Zeilenumbrüche, beim IE überlappen sich die Texte der 3. Ebene.

Das zweite Problem ist, dass die Liste über den Layer in dem sie liegt hinausragt.

Zu sehen ist das alles unter o.a. URL links oben (sorry, um die Position hab ich mich bisher noch nicht gekümmert, daher ist es etwas schwer erkennbar)