nicht angemeldet
Hallo ... ich fummel gerade an einer Dipl.-Arbeit und habe ein Problem. Ich möchte eine Navigation mit drei Hierachien erstellen, die Untermeneue ein- und ausblendet.
<div id="navi">
<ul>
<li><a href="hochschule.html">HOCHSCHULE</a>
<!-- Untermenue Hochschule: -->
<ul>
<li><a href="kurzportrait.html">KURZPORTRAIT</a></li>
<!-- Unteruntermenue Hochschule: -->
<ul>
<li><a href="test.html">TESTSEITE</a></li>
<li><a href="test2.html">TESTSEITE2</a></li>
</ul>
<li><a href="leitbild.html">LEITBILD</a></li>
<li><a href="chronik.html">CHRONIK</a></li>
</ul>
</li>
<li><a href="rektorat.html">REKTORAT</a></li>
<li><a href="hochschulverwaltung.html">HOCHSCHULVERWALTUNG</a></li>
<li><a href="fachbereiche.html">FACHBEREICHE</a></li>
<li><a href="studieren.html">STUDIEREN</a></li>
<li><a href="alumni.html">ALUMNI</a></li>
</ul>
</div>
Mit Hilfe des folgenden CSS-Eintrags realisiere ich das Ein- und Ausblenden der zweiten Hierachie. Es wird immer nur das Untermenue des aktuellen Links eingeblendet, alle andern Untermenues (die nicht in einem <li class="current" eingeschlossen sind) sind ausgeblendet.
#navi ul li ul { display:none; }
#navi ul li.current ul { display:block; }
Jetzt stellt sich mir aber die Frage wie ich die 3.Hierachie ausblenden kann, wenn ich mich in der 2. Hierarchie befinde. Ich habe bereits alles mögliche ausprobiert, aber finde keine Lösung. z.B.
#navi ul li ul { display:none; }
#navi ul li.current ul { display:block; }
#navi ul li.current ul ul { display:block; }
#navi ul li.current ul li.current ul { display:block; }
Kann mir jmd. weiterhelfen?
Zur Verdeutlichung poste ich nochmal die kompete CSS:
/*Aufzählungsabstand entfernen*/
#navi ul, #navi li { margin:0; padding:0; }
/* Aufzählunfselemente entfernen */
#navi ul {list-style-type:none; }
#navi li { width: 150px; }
#navi ul li a { display:block;
color:#FFFFFF;
font-weight:bold;
text-decoration:none;
background-color:#3C64A0;
border: 1px solid #000000;
margin-bottom: 2px;
padding: 0.3em; }
#navi ul ul a { margin-left: 10px; }
#navi ul ul ul a { margin-left: 20px; }
#navi ul a:link { color:#FFFFFF; background-color:#3C64A0; }
#navi ul a:visited { color:#FFFFFF; background-color:#3C64A0; }
#navi ul a:hover { color:#3C64A0; background-color:#00F078; }
#navi ul a:focus { color:#3C64A0; background-color:#00F078; }
#navi ul a:active { color:#3C64A0; background-color:#00F078; }
#navi ul li ul { display:none; }
#navi ul li.current ul { display:block; }