Huhu,
ich hoffe ich erschrecke nicht mit einem blutigem Anfänger Problem.
Jedenfalls versuche ich ein horizontal-rechts ausgerichtetes Menü zu erstellen.
Soweit bin ich auch gekommen. Mit float:right in den <ul> und float:left in den <li> das Problem ist jetzt aber, dass das Untermenü am rechten Bildschirmrand Zeilenumbrüche macht anstatt sich auch daran auszurichten.
Vielleicht kann der Code das Problem weiter verdeutlichen:
HTML-Code:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dropdown</title>
<style type="text/css">
#menu li:hover ul{
display:block;
}
#menu{
display:block;
position:relative;
}
#menu ul{
margin:0px;
padding:0px;
float:right;
}
#menu li{
position:static;
float:left;
list-style:none;
float:left;
}
#menu li li{
}
#menu ul:after{
content:".";
display:block;
height:0px;
clear:both;
visibility:hidden;
}
#menu ul ul{
position:absolute;
display:none;
}
#menu a{
text-decoration:none;
color:#999;
}
#menu a:hover{
color:#FC3;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a>
<ul>
<li><a href="#">1. Untermenü About Us</a></li>
<li><a href="#">2. Untermenü About Us</a></li>
<li class="last"><a href="#">3. Untermenü About Us</a></li>
</ul>
</li>
<li><a href="#">Gallery</a>
<ul>
<li><a href="#">1. Untermenü Gallery</a></li>
<li><a href="#">2. Untermenü Gallery</a></li>
<li class="last"><a href="#">3. Untermenü Gallery</a></li>
</ul>
</li>
<li class="last"><a href="#">Contact</a></li>
</ul>
</div>
</body>
</html>