Verschachtelte ul-Navigation untereinander anordnen

[cpfeil]

Hallo,

ich habe folgendes Problem und hoffe das mir jemand helfen kann. Ich habe folgende Verschachtelte Navigation (Beispiel):

  
<div id="menu">  
<ul>  
    <li>Startseite</li>  
    <li>Produkte</li>  
    <ul>  
        <li>Produkt X</li>  
        <li>Produkt Y</li>  
    <ul>  
    <li>Kontakt</li>  
    <ul>  
        <li>Mitarbeiter</li>  
        <ul>  
            <li>Mitarbeiter 1</li>  
            <li>MItarbeiter 2</li>  
        </ul>  
    </ul>  
    <li>Impressum</li>  
</ul>  

Es handelt sich dabei um eine Navigation die beliebig verschachtelt sein kann.

Ich möchte nun, dass die erste Ebene in HTML in einer Zeile steht. Die zweite Ebene in der nächsten und die dritte Eben in der dritten Zeile in HTML. Also so:

  
Startseite | Produkte | Kontakt | Impressum  
Mitarbeiter  
Mitarbeiter 1 | Mitarbeiter 2  

Einen Mechanismus, dass nur die Unterebenen der angewählten Seite angezeigt werden, habe ich schon in PHP erstellt.

Ich habe mit CSS folgenden Ansatz gewählt. Allerdings habe ich dabei das Problem, wenn ich ab der zweiten ul-Ebene mit position:absolute arbeite, das Menü keine ordentliche Höhe mehr hat und die aneren Inhalte auf der Seite unter die Navigation "rutschen".

HIer mein CSS-Ansatz:

  
#menu {  
	float:left;	  
	clear:both;  
	width:100%;  
}  
  
#menu a {  
	text-decoration:none;  
	color:#333;	  
}  
  
#menu ul {  
	float:left;  
	clear:both;  
	position:relative;  
	width:100%;  
	list-style-type:none;  
	margin:0;  
	padding:0;  
}  
  
#menu ul li {  
	float:left;	  
	display:block;  
	margin:0 10px 0 0;  
	background-color:#ccc;  
}  
  
#menu ul li ul {  
	float:left;  
	clear:both;  
	position:absolute;  
	heigth:auto;  
	top:20px;  
	left:0px;  
	display:block;  
}  
  
#menu ul li ul li {  
	float:left;  
	display:block;  
}  
  

Ich hoffe, jemand kann mir helfen!?

LG