CSS Navigation div ausblenden und wieder anzeigen

[macmensa]

Hi @all...

nach langer Zeit mache ich nun endlich mal wieder was an meiner HP und bastel momentan an einer neuen Navigation mit CSS... Nach 4 schlaflosen Nächten habe ich nun grundsätzlich erreicht was ich wollte, aber den letzten Haken bekomme ich einfach nicht raus...

Mein Problem liegt beim verstecken und anzeigen eines div bei li:hover. Ich habe alle möglichen Varianten ausprobiert aber finde meinen Denkfehler nicht.

Die Liste im HTML hat 3 <ul> Ebenen. "Reines" ausblenden der einzelnen Ebenen mit div#navi ul ul ul (3. Ebene) oder div#navi ul ul (2. Ebene){display: none;} funktioniert einzeln oder in Kombination wunderbar, aber ich bekomme die anschliessende Einblendung nicht mehr hin.

Hier mal der CSS Code:

<style type="text/css">  
  
#navi {  
position: relative;  
width: 165px;  
top: 0px;  
left: 0px;  
}  
  
#navi li {  
position: relative;  
}  
  
#navi ul {  
list-style: none;  
margin: 0;  
padding: 0;  
}  
  
#navi p {  
padding-left: 10px;  
margin-bottom: 0;  
font: bold 11px agency fb, helvetica, sans-serif;  
color: #bdb177;  
background-repeat: no-repeat;  
background-position: right;  
}  
  
#navi a {  
text-decoration: none;  
}  
  
#navi ul ul a{  
display: block;  
font: bold 11px agency fb, helvetica, sans-serif;  
background: #666666;  
margin: 0;  
padding: 2px 3px;  
}  
  
div#navi ul ul ul,  
div#navi ul li:hover ul  
{display: none;}  
  
div#navi ul ul li:hover ul  
{display: block;}  
  
#raum li p {  
line-height: 40px;  
background-image: url("../assets/images/raumb40.jpg");  
}  
  
#shuttle li p {  
line-height: 40px;  
background-image: url("../assets/images/shuttleb40.jpg");  
}  
  
#iss li p {  
line-height: 40px;  
background-image: url("../assets/images/issb40.jpg");  
}  
  
#moon li p {  
line-height: 40px;  
background-image: url("../assets/images/moonb40.jpg");  
}  
  
#ground li p {  
line-height: 40px;  
background-image: url("../assets/images/groundb40.jpg");  
}  
  
#glossar li p {  
line-height: 40px;  
background-image: url("../assets/images/augeb40.jpg");  
  
</style>

und der dazugehörige HTML Code:

<div id="navi">  
  <ul>  
        <div id="raum">  
        <li><a href="./1998.html"><p>Raumfahrt</p></a></li>  
        </div>  
  
        <div id="shuttle">  
        <li><a href="./1999.html"><p>Space Shuttle</p></a></li>  
        </div>  
      <ul><li><a href="./1999.html">Die Orbiter</a></li>  
          <li><a href="./1999.html">Aufbau</a></li>  
      </ul>  
  
        <div id="iss">  
        <li><a href="./2000.html"><p>ISS</p></a></li>  
        </div>  
      <ul><li><a href="./1999.html">Module</a></li>  
          <li><a href="./1999.html">Chronik</a></li>  
         <ul><li><a href="./1999.html">Das Jahr 1998</a></li>  
             <li><a href="./1999.html">Das Jahr 1999</a></li>  
             <li><a href="./1999.html">Das Jahr 2000</a></li>  
         </ul>  
     </ul>  
  
  
        <div id="moon">  
        <li><a href="./2001.html"><p>Moon</p></a></li>  
        </div>  
  
        <div id="ground">  
        <li><a href="./2002.html"><p>Ground Control</p></a></li>		  
        </div>  
  
        <div id="glossar">  
        <li><a href="./2003.html"><p>Glossar</p></a></li>  
        </div>  
  </ul>  
</div>

Auf folgendem Link habe ich obiges Beispiel mal online gestellt zum angucken was da irgendwie nicht klappt... Test Seite Navigation aktuell

Ich drehe mich mit diesem verstecken und anzeigen mittlerweile gedanklich im Kreis und scheine "betriebsblind" zu werden... Denn das für mich faszinierende ist, das ich in einem absoluten Erstentwurf das ganze schonmal am laufen hatte... Jedoch war da die Aufklappung noch z.T. horizontal gelöst... Nichts desto trotz ging es da... Der Code auf der Seite war dafür:

div#menu ul ul ul,  
div#menu ul ul,  
div#menu ul ul li:hover ul ul,  
div#menu ul li:hover ul ul  
{display: none;}  
  
div#menu ul li:hover ul,  
div#menu ul ul li:hover ul,  
div#menu ul ul ul li:hover ul  
{display: block;}

Und genau dieser Code funktioniert nun auf einmal nicht mehr... Warum wissen wohl nur die Götter...

Und der dazugehörige Link für diese erste Testseite: Testseite 2

Ich würde mich sehr freuen, wenn sich 1,2 Leute finden könnten die mir hier gedanklich oder mit dem Code direkt auf die Sprünge helfen könnten... Denn langsam aber sicher komme ich in die Phase des verzweifelns...

Danke im vorraus... Gruss Mac