Frage an CSS Profis 2 - Dynamisches Menue ohne JS Positionierung

[Matthias Apsel]

Om nah hoo pez nyeetz, nocheinPoet!

Ich habe dein Beispiel etwas reduziert und folgendes CSS für dein im OP gepostetes HTML erstellt.

Das Menü lässt sich nicht mit der Tastatur bedienen, dazu Bedarf es JavaScript, weil nur a-Elemente den Focus erhalten können. Wenigstens klappt bei Durchsteppen die Liste auf.

Falls du wirklich erreichen möchtest, dass _alle_ verweissensitiven Flächen gleich breit sind, musst du min-width ebenfalls per JS setzen.

Falls das nicht nur eine theoretische Spielerei ist, würde ich mich freuen, die originale Seite zu sehen, dann lässt sich dir u.U. zielgerichteter helfen.

ul, li {margin: 0; padding: 0;}  
			  
li {  
	min-width: 8em;  
	display: block;  
	position: relative;  
	background: #B2B2E6;  
}  
					  
nav > ul > li {  
	display: inline-block;  
	vertical-align: top;  
	margin-right: 1em;  
}  
			  
li > ul {  
	position: absolute;  
	left: -1000%;  
}  
			  
li:hover > ul, a:focus ~ ul{  
	left: 0;  
}  
			  
li > ul > li:hover > ul {  
	left: 100%;  
	top: 0;  
}  
			  
a  {  
	display: inline-block;  
	width: 100%;  
	margin: .2em;  
}  
  
a:not(:last-child)::after {  
	content: '►';  
	position: absolute;  
	right: 0;  
}  
			  
li:hover > a:not(:last-child)::after {  
	content: '▼';  
}  
			  
li > ul > li:hover > a:not(:last-child)::after {  
	content: '►';  
}

Link zum Beispiel

Matthias