nicht angemeldet
Verschachtelte Menulisten mit CSS
Ich wollte ein einfaches Menu mit zwei Ebenen und nur mit CSS und Listen erstellen. Ich war schon so froh, dass der Befehl "display:none;" (endliche) zu einem Ergebnis geführt hat. Nun aber bin ich bei "display:block;" irgendwie an (m)eine "Grenze" geraten. Ich habe alle möglichen Seiten angeschaut und finde meinen Fehler nicht:
Style-Datei: #navigation {float:left; width:300px;}
#navigation ul {margin 10px; padding:10px; background-color:yellow; list-style-type:none;} #navigation li { padding:10px; margin:0; font-size:15px; font-weight:400; font-family:Verdana; text-align:center;}
#navigation ul li ul {width:110%; align:top right; margin-bottom:-10px;}
#navigation a { width:100%; display:block; color:blue; padding:2px; border-bottom:solid blue 1px; border-right:solid blue 1px; border-top:solid white 1px; border-left:solid white 1px; background-color:white; text-decoration:none;}
#navigation ul a:hover, a:active { color:gray; border-top:solid gray 1px; border-left:solid gray 1px; border-bottom:solid white 1px; border-right:solid white 1px;}
#navigation ul li ul {display:none;} #navigation ul li ul a:active {display:block;} #navigation ul li ul a:hover {display:block;}
<html> <head> <link rel="stylesheet" type="text/css" href="schnipsel.css"> </head>
<body>
<div id="navigation"> <ul> <li><a target="_top" href="#">Willkommen</a></li> <li><a target="_top" href="#">Beratung</a> <ul><li><a target="_top" href="#">Anlagen</a></li> <li><a target="_top" href="#">Finanzplanung</a></li> <li><a target="_top" href="#">Nachlassplanung</a></li> <li><a target="_top" href="#">Steueroptimierung</a></li> <li><a target="_top" href="#">Vorsorgeplanung</a></li> <li><a target="_top" href="#">Wohneigentum</a></li></ul></li> <li><a target="_top" href="#" >Partner</a></li> <li><a target="_top" href="#">Portrait</a></li> <li><a target="_top" href="#">Kontakt</a></li> </ul> </div> </body> </html>
Ich bin für jeden Tipp dankbar! Liebe Grüsse Verena
-
hallo,
Ich habe alle möglichen Seiten angeschaut und finde meinen Fehler nicht
Wenn du einen Fehler gemacht hast, findest du den ja auch nicht auf anderen Seiten.
Und wo scheint dir nun etwas an deinem Code fehlerhaft?
Grüße aus Berlin
Christoph S.
-
hallo,
Ich habe alle möglichen Seiten angeschaut und finde meinen Fehler nicht
Wenn du einen Fehler gemacht hast, findest du den ja auch nicht auf anderen Seiten.
Und wo scheint dir nun etwas an deinem Code fehlerhaft?
Grüße aus Berlin
Christoph S.
Ich hab nach verschachtelten vertikalen Menu-/Navigationslisten gesucht und dort abgeschaut, wie Unterebenen aus- und eingeblendet worden sind.
Ich habe meinen letzten Code nun abgeändert, aber immer noch ohne Erfolg. Weil beim Testen Schritt für Schritt, alles richtig angezeigt wurde (bis zu display:none;) vermute ich den Fehler hier:
#navigation ul li>ul {display:none;}
#navigation ul li:hover>ul {display:block;}
#navigation ul li: a:active>ul {display:block;}Gruss Verena
-
Hi,
#navigation ul li>ul {display:none;}
#navigation ul li:hover>ul {display:block;}das sollte funktionieren in modernen Brosern - einschließlich dem IE7 im standardkompatiblen Modus.
#navigation ul li: a:active>ul {display:block;}
Das ist Unsinn.
freundliche Grüße
Ingo
-
-
-
#navigation ul {margin 10px;
Hi fehlt da nicht ein Doppelpunkt?
Oli
-
Hi,
#navigation ul li ul {display:none;}
#navigation ul li ul a:active {display:block;}
#navigation ul li ul a:hover {display:block;}wenn die ul ausgeblendet ist, kannst Du die darin enthaltenen Elemente nicht anzeigen lassen. Abgesehen davon haben sie ja bereits die Eigenschaft display:block bekommen, sind aber im ausgeblendeten Zustand der ul gar nicht sichtbar, so dass sie auch nicht gehovert werden können.
Du möchtest vielmehr die ul bei li:hover einblenden, was allerdings beim IE6 oder auch beim IE7 im quirks mode noch ein kleines Javascript benötigt.
freundliche Grüße
Ingo