mssbt: Untermenü Zentriert

SELF-Forum

Untermenü Zentriert

mssbt
– Informationen zu den Bewertungsregeln

Hallo,

ich komme bei folgendem Problem derzeit nicht weiter:

Ich habe ein Menü mit css designed. Untermenü's öffnen sich dynamisch über einen hover Effekt.

Hier ein etwas abgespecktes Beispiel:
http://design-partner.de/test/nav.html

Wie bekomme ich es jetzt hin, dass die sich dynamisch öffnenden Untermenüs's zentriert unter dem jeweiligen Hauptmenüpunkt oben aufgehen?

Hier der Quelltext:

html:

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
       "http://www.w3.org/TR/html4/strict.dtd">  
  
<html>  
<body>  
<link rel="stylesheet" href="style.css" type="text/css" />  
  
<div class="Rahmen"><ul class="nav">  
	<li class="page_item"><a href="#">Home</a></li>  
	<li class="page_item"><a href="#">Boats</a>  
		<ul class="children">  
			<li class="page_item"><a href="#">Cabin Cruiser</a></li>  
			<li class="page_item"><a href="#">Test2</a></li>  
		</ul>  
	</li>  
	<li class="page_item"><a href="#">Contact</a></li>  
	<li class="page_item"><a href="#">Need to know</a>  
		<ul class="children">  
			<li class="page_item"><a href="#">Formular</a></li>  
			<li class="page_item"><a href="#">Test2</a></li>  
		</ul>  
	</li>  
</ul></div>  
</body>  
</html>

css:

  
.Rahmen  
{  
	position: absolute;  
	left: 200px;  
	top: 50px;  
}  
  
.nav  
{  
	text-align: center;  
	margin: 0px;  
	padding: 0px;  
}  
  
.nav li  
{  
	position: relative;  
	float: left;  
	margin: 0px 5px 0px 5px;  
	padding: 0px;  
	list-style: none;  
}  
  
.nav li:hover .children  
{  
	display: block;  
}  
  
.children  
{  
	position: absolute;  
	margin: 0px;  
	padding: 0px;  
	display: none;  
	border-style: solid;  
	border-width: 1px;  
}  
  
  
.children li  
{  
	float: none;  
	margin: 0px;  
	display: block;  
	width: 100px;  
}  
  
.nav a:link, .nav a:visited  
{  
	text-decoration: none;  
	display: block;  
	padding-bottom: 10px;  
}  
  
.children a:link, .children a:visited  
{  
	padding-top: 5px;  
	padding-bottom: 5px;  
}

Über einen Tipp würde ich mich freuen.

Gruß
mssbt

Beitrag melden
–
Informationen zu den Bewertungsregeln