Einzelnen Beitrag anzeigen
  #2 (permalink)  
Alt 11.02.2015, 07:06
Benutzerbild von etux
etux etux ist offline
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.09.2007
Ort: Berlin
Beiträge: 643
etux wird schon bald berühmt werden
Standard

Morgen.

Hier was zum testen (teilweise kommentiert) :
Code:
#menue {
	position: absolute;
 	bottom: 20px;
	right: 40px;
	font-family: Lucida Sans Typewriter, Courier New;
	font-size: 15px;
	line-height: 2;
 	color: #4b4949;
}
#menue ul {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}
#menue li {
	position: relative; /* Containing Block (Begriff bitte googeln) für das Submenü */
	display: inline-block;
	text-align: center;
	margin: 5px;
}
#menue a,
#menue strong {
	display: block;
	white-space: nowrap; /* Verhindert Textumbrüche bei Leerzeichen */
	color: #4b4949;
	opacity: 0.3;
}
#menue li ul {
	position: absolute;
	bottom: 100%; /* Setzt die untere Kante der Liste (Submenü) auf die obere Kante des Listenelements (Hauptmenü-Element) */
	left: -90%; /* Versetzt das Submenü weiter nach links vom Hauptmenü-Element */
	padding-right: 90%; /* Platz für das Hintergrund-Bild (Pfeil) */
	background: url(Pfeil-Bild.gif) no-repeat right bottom;
	display: none;
}
#menue li:hover ul {
 	display: block;
}
#menue a:hover,
#menue strong {
 	background-color: #ddd; /* hellgraue Hintergrundfarbe nur als Beispiel */
 	opacity: 1;
}
Nachtrag:
Dein Bildschirmfoto war vorhin nicht aufrufbar. Jetzt sehe ich, dass Du eine seitliche (nach links) Versetzung des Submenüs und ein Hintergrund-Pfeil nicht brauchst.
Daher reicht es beim Submenü folgende Formatierung:
Code:
#menue li ul {
	position: absolute;
	bottom: 100%;
	left: 0;
	display: none;
}
__________________
Grüße: Emil
--------------------------------------
https://emil-webdesign.net/

Geändert von etux (11.02.2015 um 07:17 Uhr)
Mit Zitat antworten
Sponsored Links