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;
}