nicht angemeldet
Wie mache ich bei meinem horizontalen Menü eine 3.Ebene?
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
-
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 aufli 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: > > ~~~css 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.
li ul li ul {
display: none;
}schaltet alles ab, was es matcht, also mehr als du denkst.
Ein Versuch, ein Child von einem ausgeblendeten Parent anzuzeigen, muss fehlschlagen.Verwende Klassen für Ebenen.
mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische-
li ul li ul {
display: none;
}schaltet alles ab, was es matcht, also mehr als du denkst.
Ein Versuch, ein Child von einem ausgeblendeten Parent anzuzeigen, muss fehlschlagen.Verwende Klassen für Ebenen.
mfg Beat
Hi,
funktioniert der hovereffekt überhaupt wenn man klassen verwende?
Also wenn ich zum Beispiel folgendes habe:.untermenue2:hover ul {
display: block;
}Das funktioniert doch gar nicht?! Wie soll ich das anstellen? Ein Beispiel wäre nett, dann ist es einfacher zu verstehen ;) .
mfg
pizzatoni
-
-
Hi,
mich würde mal interessieren, wie ich es schaffen kann, eine 3.Ebene in meinem Menü zu schaffen?
hier habe ich noch einen [Css-Navigation-Test](file://localhost/Users/kgde/Joachim/web/js/navi/navi_css_tief.html) liegen, der Dir vielleicht weiterhilft. Menüpunkt "Linktest3" ist tiefer verschachtelt. Ich weiss aber nicht mehr, auf welchen Browsern ich den getestet habe...
Gruesse, Joachim
--
Am Ende wird alles gut.-
Hi,
hier habe ich noch einen [Css-Navigation-Test](file://localhost/Users/kgde/Joachim/web/js/navi/navi_css_tief.html) liegen, der Dir vielleicht weiterhilft. Menüpunkt "Linktest3" ist tiefer verschachtelt. Ich weiss aber nicht mehr, auf welchen Browsern ich den getestet habe...
Gruesse, Joachim
Hi Joachim,
kann leider nicht den Link öffnen :(
Vielleicht hast du eine falsche Adresse angegeben?!mfg,
Pizzatoni-
Hi,
Vielleicht hast du eine falsche Adresse angegeben?!
ups... Css-Navigation-Test
Gruesse, Joachim
--
Am Ende wird alles gut.
-
-