Probleme mit der Navigation auf meiner Website

[schmiebscher]

Folgendes Problem besteht bei meiner Navigation:
ich möchte gern eine Navigation mit 3 Ebenen erstellen, aber irgendwie wird immer nur der letzte Eintrag der 3. Ebene angezeigt, ich habe mir schon einige Seiten angeschaut, komme aber nicht dahinter was falsch ist in meiner CSS.

Ich denke der Fehler liegt irgendwo in dem fettmarkierten Teil der CSS.


Ich hoffe einer von euch kann mir helfen.

Ich bedanke mich schon mal im vorraus.

Mit freundlichen Grüßen.

hier die html:

<div id="navibereich">
<ul id="ebene01">
<li id="navi01"><a href="index.html">Startseite</a></li>
<li id="navi02"><a href="bilder.html">Bilder</a>
<ul class="ebene02">
<li id="navi0201"><a href="bilder-gebu-gemeindehaus-april-2007.html">Geburtstagsfeier 2007</a></li>
<li id="navi0202"><a href="bilder-maibaumsetzen-2007.html">Maibaumsetzen 2007</a></li>
<li id="navi0203"><a href="bilder-dengeltag-2007.html">Dengeltag 2007</a></li>
<li id="navi0204"><a href="bilder-dorffest.html">Dorffest</a>
<ul class="ebene03">
<li id="navi020401"><a href="bilder-dorffest-2008.html">2008</a></li>
<li id="navi020402"><a href="bilder-dorffest-2009.html">2009</a></li>
</ul>
</li>
<li id="navi0205"><a href="bilder-schmiebsch.html">rund um Schmiedebach</a></li>
<li id="navi0206"><a href="bilder-maennertag-2009.html">Männertag 2009</a></li>
<li id="navi0207"><a href="bilder-umzug-lehesten.html">Umzug Bergmannstag</a></li>
</ul>
</li>
<li id="navi03"><a href="news.html">News</a></li>
<li id="navi04"><a href="kontakt.html">Kontakt</a></li>
<li id="navi05"><a href="gaestebuch.php">G-Book</a></li>
<li id="navi06"><a href="impressum.html">Impressum</a></li>
<li id="navi07"><a href="archiv.html">Fotoarchiv</a></li>
</ul>

und hier die CSS dazu:

@media screen {

#navibereich {
overflow: hidden;
color: black;
background-color: #73FBAC;
text-align: center;
padding: 5px 10px 5px 10px;
margin: 0;
border-bottom: 1px solid #8c8c8c;
}

#navibereich ul {
margin: 0;
float: right;
}

#navibereich li {
display: inline;
float: left;
width: auto;
list-style: none;
margin: 0;
}

#navibereich li li { clear: both; }

#navibereich a {
display: block;
color: black;
background-color: #ffeda0;
padding: 4px 8px 4px 8px;
border: 1px solid #8c8c8c;
}

#navibereich a:hover,
#navibereich a:focus,
#startseite #navi01 a,
#bilderseite #navi02 a,
#bilderseite1 #navi02 a,
#bilderseite2 #navi02 a,
#bilderseite3 #navi02 a,
#newsseite #navi03 a,
#kontaktseite #navi04 a,
#impressum #navi06 a {
color: black;
background-color: #ffe05a;
border-bottom: none;
}

#wrapper #navibereich #ebene01 li a:active {
color: white;
background-color: #d90000;
}

#navibereich li ul {
position: absolute;
left: -9999px;
top: -9999px;
display: inline;
width: 0;
height: 0;
background-color: transparent;
}

#navibereich li ul li li {
position: absolute;
left: -12000px;
top: -12000px;
display: inline;
width: 0;
height: 0;
background-color: transparent;
}

#navibereich li:hover ul,
#navibereich li.sfhover ul {
left: auto;
top: auto;
display: block;
width: auto;
height: auto;
background-color: #fff3c0;
border-bottom: 2px solid #f3c600;
}

#navibereich li ul li:hover li,
#navibereich li ul li.sfhover li {
left: 125px;
top: -27px;
z-index: 500;
display: block;
width: auto;
height: auto;
background-color: #fff3c0;
border-bottom: 2px solid #f3c600;
}


#navibereich ul#ebene01 ul.ebene02 li a {
background-color: #fff3c0;
}

#navibereich ul#ebene01 ul.ebene02 li a:hover {
background-color: #ffe05a;
}

#navibereich ul#ebene01 ul.ebene02 ul.ebene03 li a:hover {
background-color: #ffe05a;
}

#navibereich li li a {
width: 8em;
}

#navibereich li li li a {
width: 8em;
}


}