Schokokrapfen: meine navigation ist einfach nicht mittig

Beitrag lesen

Hallo!

Also ich suche jetzt seit Tagen wo mein Fehler liegt, aber ich finde ihn einfach nicht.

Ich möchte eine Navigation mit 2 Ebenen erstellen. Die erste ist horizontal und die zweite vertikal. Das hat soweit auch geklappt.

Aber: die horizontale Ebene soll 950px breit sein und auf der Seite zentriert werden. Funktioniert aber nicht.
Die vertikale Ebene soll dafür nicht zentriert sein und unter dem dazu gehörigen Punkt stehen. Fuunktioniert auch nicht.
Außerdem sollen die "Naviagtions-Buttons" gleich groß sein.

html-code:

...

<div id="navigation">
<div class="innen">
<ul>
<li >
<h2><a href="index.html" title="Zur Startseite">Home</a><h2/>
</li>

		<li class="active">  
			<h2><a href="produkte.html" title="Erfahren Sie mehr über unsere Produkte">Produkte</a><h2/>  
			<ul>  
				<li >  
					<a href="systemg2.html" title="Erfahren Sie mehr über das Produkt">System G2</a>  
				</li>  
				<li >  
					<a href="systemr8.html" title="Erfahren Sie mehr über das Produkt">System R8</a>  
				</li>  
				<li >  
					<a href="Regalwagen.html" title="Erfahren Sie mehr über das Produkt">Regalwagen</a>  
				</li>  
				<li >  
					<a href="systemt.html" title="Erfahren Sie mehr über das Produkt">System T</a>  
				</li>  
				<li >  
					<a href="systemw.html" title="Erfahren Sie mehr über das Produkt">System W</a>  
				</li>  
				<li >  
					<a href="systema.html" title="Erfahren Sie mehr über das Produkt">System A</a>  
				</li>  
				<li >  
					<a href="waeschesammler.html" title="Erfahren Sie mehr über das Produkt">Wäschesammler</a>  
				</li>  
				<li >  
					<a href="leichtmetallwagen.html" title="Erfahren Sie mehr über das Produkt">Leichtmetallwagen</a>  
				</li>  
				<li >  
					<a href="sonderanfertigungen.html" title="Erfahren Sie mehr über das Produkt">Sonderanfertigungen</a>  
				</li>  
				<li >  
					<a href="technischegrundlagen.html" title="Erfahren Sie mehr über das Produkt">Technische Grundlagen</a>  
				</li>  
			</ul>  
		</li>	  
		  
		<li >  
			<h2><a href="kontakt.html" title="Nehmen Sie zu uns Kontakt auf">Kontakt</a><h2/>  
		</li>  
		  
		<li >  
			<h2><a href="ueberuns.html" title="Erfahren Sie mehr über uns">Über uns</a><h2/>  
		</li>  
		  
		<li >  
			<h2><a href="aktuelles.html" title="Hier erfahren Sie Neuheiten">Aktuelles</a><h2/>  
		</li>  
	</ul>  
</div>  

</div>

...

Css:
...
/* Navigation */

#navigation .innen, #wrapper, #footer div {
clear:both;
text-align:center;
width:950px;
margin: 0px auto; /* 0px nach oben/unten gleicher Abstand nach links/rechts*/
padding:0px;
}

#navigation ul{
width:950px;
list-style:none;
margin:0px;
}

#navigation ul li{
float:left;
position:relative;
border:1px solid white;
}

#navigation li{
float:left;
border:1px solid white;
}

#navigation ul li.active ul{
margin:0px;
padding:0px;
position:absolute;
}

#navigation ul li.active ul li{
float:none;
display: block;
}

#navigation li.active{
float:left;
position:relative;
border:1px solid white;
}

#navigation li a{
display:block;
text-decoration:none;
font-weight:bold;
margin:0px;
padding:8px 12px 6px;
}

#navigation li.active li{
clear:left;

}

#navigation a, #navigation li.active li a{
display:block;
padding:auto;
background:#CCCCFF;
}

#navigation li.active li a{
text-align:center;
}

#navigation li.active a, #navigation li.active li.active a{
text-align:center;
}

#naviagtion ul ul{
position:absolute;
...

Könnte mir da bitte jemand helfen? ich komm echt nicht mehr weiter. =(