sho: Klappmenü hover..

Beitrag lesen

SELF-Forum

Klappmenü hover..

sho
– Informationen zu den Bewertungsregeln

Tach auch,

so. Ich weiß. Es gibt kaum ein Thema, das es schon zu Hauf mit Beispielen gelöst wurde, als das horizontale Klappmenü mit hover und verschachtelter Liste :-) Trotzdem: Finde ich in meinem Code des Rätsels Lösung nicht.
Es wird, so lang das display:none für meine Subliste aktiv ist, alles so angezeigt wie ich will. Schön. Nur bekomme ich die Subliste nicht über den Link in der 1. Ebene angesprochen. Wenn man über "Menu1" hovert, soll bitteschön die <ul> der 2. Ebene ein display:block bekommen.
Was mache ich falsch? Ich freu mich über ein 2. und 3. Auge.

Hier der Übeltäter:

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" lang="de">  
<head>  
	<title>Menü Test CSS</title>  
	<style type="text/css">  
	<!--  
	/*EBENE 1*/  
	ul#menu{  
	width:490px;  
	top:72px;  
	left:30px;  
	margin:0;  
	padding:0;  
	background:#cd0714;  
	}  
	ul#menu a{  
		display:block;  
		height:30px;  
		text-decoration:none;  
	}  
	div#header ul li:hover{  
		background:#da4558;  
	}  
	ul#menu li{  
		position:relative;  
		float:left;  
		list-style:none;  
	}  
	.clear{  
	clear:left;  
	}  
	/*EBENE 2*/  
	ul#menu ul{  
		position:absolute;  
		right:0px;  
		margin:0;  
		padding:0;  
		/*display:none;*/  
	}  
	#menu li a:hover ul,  
		ul#menu ul li:hover ul{  
		display:block;  
		background:white;  
	}  
	ul#menu ul li{  
		float:none;  
		width:30px;  
		line-height:30px;  
		display:block;  
		background:green;  
		border-bottom:solid 1px #cd071e;  
	}  
	ul#menu ul li a{  
		display:block;  
		width:30px;  
		height:30px;  
		background:black;  
		text-decoration:none;	  
	}  
	a#punkt1{  
		width:120px;  
		background:black;  
		}  
	a#punkt2{  
		width:140px;  
		background:white;  
		}  
	a#punkt3{  
		width:100px;  
		background:blue;  
		}  
	a#punkt4{  
		width:130px;  
		background:pink;  
		}  
		-->  
	</style>  
</head>  
<body> 	  
			<ul id="menu">  
				<li><a id="punkt1" href="#" onfocus="this.blur()">menu1</a>		  
						<ul>  
							<li><a href="#" onfocus="this.blur()">aaa</a></li>  
							<li><a href="#" onfocus="this.blur()">bbb</a></li>  
							<li><a href="#" onfocus="this.blur()">ccc</a></li>  
						</ul>				  
				</li>  
				<li><a id="punkt2" href="#" onfocus="this.blur()">menu2</a></li>  
				<li><a id="punkt3" href="#" onfocus="this.blur()">menu3</a></li>  
				<li><a id="punkt4" href="#" onfocus="this.blur()">menu4</a>  
					<ul>  
						<li><a href="#" onfocus="this.blur()">ddd</a></li>  
						<li><a href="#" onfocus="this.blur()">eee</a></li>  
						<li><a href="#" onfocus="this.blur()">fff</a></li>  
					</ul>  
				</li>				  
				<li class="clear"></li>  
			</ul>  
	</div>	  
</body>  
</html>

(Nebeninfo: die verbal-Farbangaben und Bemaßungen sind nur beispielhaft zum Testen :-) Und die Luinks brauche id's, weil Sie im echten Leben mit gleichnamigen Hintergrundbildern belegt sind)

Beitrag melden
–
Informationen zu den Bewertungsregeln