nicht angemeldet
Hallo,
mich würde mal interessieren, wie ich es schaffen kann, eine 3.Ebene in meinem Menü zu schaffen? Habe schon alles ausprobiert, aber es klappt immer noch nicht :( .
Also als erstes habe ich das entsprechende ul-Element auf
li ul li ul {
display: none;
color: black;
}
gesetzt. (Davor hatte ich es schon in meine Navigation.html Datei eingesetzt). Dann, um den hover Effekt herzustellen, machte ich folgendes:
li:hover li ul li ul {
display: block;
color: black;
}
So...aber das klappt irgendwie nicht ganz :( . Das Menü bleibt weg (soll ja auch so sein) aber wenn es erscheinen soll (indem man über einen Link mit der Maus fährt), dann kommt es auch nicht. Langsam bin ich echt am verzweifeln.
Wäre klasse, wenn mir jemand weiterhelfen könnte.
Danke :)
Gruß,
Pizzatoni
Und hier noch schnell die Navigation.html-Datei:
<div id="navigation">
<ul>
<li>
<a href="index.php">Home</a>
</li>
<li>
<a href="Warum_Tiere_fangen.php">Warum Tiere fangen?</a>
</li>
<li>
<a href="Lebensraeume.php">Lebensräume</a>
</li>
<li style="list-style-type:square;">
<a href="Artenuebersicht.php">Artenübersicht </a>
<ul class="Untermenue">
<li>
<a href="Artenuebersicht_Aldrovanda.php">Aldrovanda</a><br>
<a href="Artenuebersicht_Byblis.php">Byblis</a><br>
<a href="Artenuebersicht_Cephalotus.php">Cephalotus</a><br>
<a href="Artenuebersicht_Darlingtonia.php">Darlingtonia</a><br>
<a href="Artenuebersicht_Dionea.php">Dionaea</a><br>
<a href="Artenuebersicht_Drosera.php">Drosera</a><br>
<a href="Artenuebersicht_Drosophyllum.php">Drosophyllum</a><br>
<a href="Artenuebersicht_Genlisea.php">Genlisea</a><br>
<a href="Artenuebersicht_Heliamphora.php">Heliamphora</a><br>
<a href="Artenuebersicht_Nepenthes.php">Nepenthes</a><br>
<a href="Artenuebersicht_Pinguicula.php">Pinguicula</a><br>
<a href="Artenuebersicht_Sarracenia.php">Sarracenia</a><br>
<a href="Artenuebersicht_Utricularia.php">Utricularia</a><br>
</li>
</ul>
</li>
<li>
<a href="Meine_Bestandliste.php">Meine Bestandliste</a>
</li>
<li>
<a href="Mein_Moorbeet1.php">Mein Moorbeet </a>
</li>
<li style="list-style-type:square;">
<a href="Mein_Terrarium1.php">Mein Terrarium </a>
<ul class="Untermenue">
<li>
<a href="Mein_Terrarium1.php">Seite 1</a><br>
<a href="Mein_Terrarium2.php">Seite 2</a><br>
<a href="Mein_Terrarium3.php">Seite 3</a><br>
</li>
</ul>
</li>
<li>
<a href="Nuetzliche_Pflegetipps.php">Nützliche Pflegetipps</a>
</li>
<li style="list-style-type:square;">
<a style="text-decoration:line-through" href="Fehler.php">Fotos</a>
<ul class="Untermenue">
<li>
<a href="fotos_2008.php">2008</a><br>
<ul class="Untermenue2">
Fleischfressende Pflanzen
Sonstige Bilder
</ul>
<a href="fotos_2009.php">2009</a><br>
<ul class="Untermenue2">
Fleischfressende Pflanzen
Sonstige Bilder
</ul>
</li>
</ul>
</li>
<li>
<a href="links.php">Links</a>
</li>
<li>
<a href="BieteanSuche.php">Biete an/Suche</a>
</li>
<li>
<a href="Ueber_mich.php">Über mich</a>
</li>
<li>
<a href="Gaestebuch.php">Gästebuch</a>
</li>
<li>
<a href="Impressum.php">Impressum</a>
</li>
</ul>
</div>
Und die CSS-Datei:
/*Navigation*/
#navigation {
position:absolute;
width:200px; /* Breite des Bereichs */
text-align: left; /* Textausrichtung */
margin-top: 10px; /* Außenabstand oben */
margin-bottom: 0px; /* Außenabstand unten */
margin-left: 0px; /* Außenabstand links */
margin-right: 15px; /* Außenabstand rechts */
text-decoration: none;
z-index: 2;
}
#navigation li {
position: relative;
background-color:#009900; /* Hintergrundfarbe */
border-top:1px black solid; /* Rahmenfarbe Auflistungpunkt oben */
border-left:25px orange solid; /* Rahmenfarbe Auflistungpunkt oben */
border-bottom:1px red solid; /* Rahmenfarbe unten */
border-right:2px blue solid; /* Rahmenfarbe unten */
margin-top:2px; /* Außenabstand oben */
padding-top:2px; /* Innenabstand oben */
padding-bottom:2px; /* Innenabstand unten */
padding-left:8px; /* Innenabstand unten */
padding-right:8px; /* Innenabstand unten */
border:0px;
list-style:none;
}
#navigation a:hover {
color:snow;
}
li ul li {
display: none;
border: none;
}
li:hover ul li{
display: block;
color: black;
}
li ul li ul {
display: none;
color: black;
}
li:hover li ul li ul {
display: block;
color: black;
}
.Untermenue {
position:absolute; top:-3px; left:120px;
border: none;
}
.Untermenue2 {
position:absolute; top:0px; left:45px;
border: none;
background-color:#FFFFFF;
}
#navigation li:hover {
background-color:green;
}
#navigation li ul li:hover {
background-color:#009900;
}
#navigation {
width: 100px;
height: 0px;
margin: 0px;
}
Tut mir echt leid, dass das jetzt so viel geworden ist (habe schon alles unwichtiges aus dem Code rausgenommen, ansonsten wäre die css-datei länger geworden).
Wer sich das ganze anschauen möchte: www.carnivoren.pytalhost.de