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