Dynamische Navigation

[Sebastian]

Hallo,

ich möchte mit Hilfe der in self-html vorgestellten Beispiele eine horizontale Navigation mit mehreren Unterebenen mit css erstellen, die in etwa so aussehen soll wie das Beispiel:

http://de.selfhtml.org/css/layouts/anzeige/nav_modern.htm

Ich möchte nur ändern, dass die gesamte Navigation horizontal zentriert ist (und natürlich die Farben), so wie hier:

http://de.selfhtml.org/css/layouts/anzeige/nav_inline.htm

Allerdings bin ich bisher grandios gescheitert, weil immer irgendein Element dann nicht gepasst hat, z.B. waren dann die Elemente in den Unterebenen nicht mehr zentriert usw.

Das ist der Code, mit dem ich arbeite:

  
<div id="topnaviframe">  
<div id="topnavi">  
<ul class="topnavigation">  
<li><a href="">Seite 1</a></li>  
<li><a href=""?>">Seite 2</a>  
 <ul>  
  <li><a href="">Seite 2.1</a></li>  
  <li><a href="">Seite 2.2</a></li>  
  <li><a href="">Seite 2.3</a></li>  
  <li><a href="">Seite 2.4</a></li>  
 </ul>  
</li>  
<li><a href="">Seite 3</a></li>  
<li><a href="">Seite 4</a></li>  
<li><a href="">Seite 5</a></li>  
<li><a href="">Seite 6</a></li>  
<li><a href="">Seite 7</a></li>  
</ul><div></div>  
</div>  
</div>  

  
  
#topnaviframe{  
  width:100%;  
  padding-top:0.75em;  
  margin-bottom:0;  
  padding-bottom:0;  
}  
  
div#topnavi {  
  background-color:silver;  
  border:1px solid black;  
}  
  
div#topnavi div {  
  clear:left;  
}  
  
ul.topnavigation {  
  margin:0;  
  padding:0.8em;  
  text-align:center;  
  background-color:silver;  
}  
  
ul.topnavigation li {  
  list-style:none;  
  float:left;  
  position:relative;  
  margin:0.4em;  
  padding:0;  
}  
  
ul.topnavigation li ul {  
  margin:0;  
  padding:0;  
  position:absolute;  
  top:1.6em;  
  left:-0.4em;  
  display:none;  
}  
  
ul.topnavigation li:hover ul {  
  display: block;  
}  
ul.topnavigation li ul li {  
  float: none;  
  display: block;  
  margin-bottom: 0.2em;  
}  
  
ul.topnavigation a, ul.topnavigation span {  
  display:block;  
  width: 7em;  
  padding: 0.2em 1em;  
  text-decoration: none;  
  font-weight: bold;  
  border: 1px solid black;  
  border-left-color: white;  
  border-top-color: white;  
  color: maroon;  
  background-color: #ccc;  
}  
  
ul.topnavigation a:hover,  
ul.topnavigation span,  
li a#aktuell {  
  border-color: white;  
  border-left-color: black; border-top-color: black;  
  color: white; background-color: gray;  
}  
  
ul.topnavigation li ul span {  
  background-color: maroon;  
}  

Vielen Dank für Eure Hilfe.