CSS Navigation div ausblenden und wieder anzeigen

[macmensa]

Hallo ihr beiden...

Eure Hilfestellung war sehr hilfreich.. DANKE !!!

Ich habe nun endlich erreicht was ich wollte und das Resultat der ganzen Problemstellung und Lösung nun nochmal aktualisiert hochgeladen:

Test Seite

Hier nun die Endlösung im Code, als erstes das HTML:

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

Hier habe ich nun den Listenaufbau nochmal überarbeitet und die <li> an der richtigen Stelle geschlossen. Das "Kuckuckskind" ist jedoch drin geblieben, jedoch etwas geändert im Vergleich zum Erstentwurf:

<div id="navi">

<ul>
        <div id="raum">
        <li><a href="./1998.html"><p>Raumfahrt</p></a></li>
        </div>

»»

Und dann berichtigst du die HTML-Fehler: 'ul' darf nur 'li'-Kinder haben,
keine 'div'-Kuckuckskinder. Die ID "raum" bekommt das 'li'-Element.

Das Problem war anscheinend nicht das <div> an sich, sondern wem ich es zugeordnet hatte. Jetzt habe ich es dem <p> zugeordnet und damit funktioniert es wie man sieht einwandfrei...

Hier die geänderte funktionierende Zuordnung:

[code lang=html]<li><a href="./1999.html"><div id="shuttle"><p>Space Shuttle</p></div></a>
           <ul>
             <li><a href="./1999.html">Die Orbiter</a></li>
             <li><a href="./1999.html">Aufbau</a></li>
          </ul>
       </li>

  
Zum Abschluss nun noch der fertige CSS Code, damit andere vielleicht mein "Machwerk" nachvollziehen können/wollen... Für die Experten ist der Code sicherlich noch sehr Verbesserungfähig. Ich selbst habe auch das Gefühl,das ich da noch einiges drin habe, was doppelt, überflüssig und kompliziert geschrieben ist, aber solange es läuft mache ich mir da nicht wirklich den Kopf drum...  
  
~~~css
<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 12px agency fb, helvetica, sans-serif;  
color: #999999;  
background-repeat: no-repeat;  
background-position: right;  
}  
  
#navi a {  
text-decoration: none;  
}  
  
#navi a:hover {  
color: #bdb177;  
}  
  
#navi p:hover {  
color: #bdb177;  
}  
  
#navi ul ul a{  
display: block;  
font: bold 11px agency fb, helvetica, sans-serif;  
background: #666666;  
margin: 3 0 0 8;  
padding: 2px 3px;  
}  
  
#navi ul ul ul a {  
margin-left: 20;  
margin-top: 3;  
}  
  
div#navi ul ul ul,  
div#navi ul ul,  
div#navi ul li:hover ul ul  
{display: none;}  
  
div#navi ul li:hover ul,  
div#navi ul ul li:hover ul  
{display: block;}  
  
#raum p {  
line-height: 40px;  
background-image: url("../assets/images/raumb40.jpg");  
}  
  
#shuttle p {  
line-height: 40px;  
background-image: url("../assets/images/shuttleb40.jpg");  
}  
  
#iss p {  
line-height: 40px;  
background-image: url("../assets/images/issb40.jpg");  
}  
  
#moon p {  
line-height: 40px;  
background-image: url("../assets/images/moonb40.jpg");  
}  
  
#ground p {  
line-height: 40px;  
background-image: url("../assets/images/groundb40.jpg");  
}  
  
#glossar p {  
line-height: 40px;  
background-image: url("../assets/images/augeb40.jpg");  
  
</style>

Abschliessend bleibt für mich nun nur noch die Frage, wie ich es auch für den IE zum laufen bekomme? Die Links der ersten Ebene sind zwar alle anklickbar, :hover funktioniert jedoch so nicht... Und auch die Größe der ersten Ebene ist "beschnitten" worden bei :height... Und vom Thema Workaround habe ich absolut noch keinen Plan... Geht das relativ schnell zu realisieren in meinem Fall, oder sind das die nächsten schlaflosen Nächte?

Gruss Mac