# drop down menu in div



## Mrlounge (9. Sep 2007)

hallo,

ich schaffe es einfach nicht dieses drop down menu in einem div horizontal zu zentrieren.


```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-script-type" content="text/javascript">
<meta http-equiv="content-style-type" content="text/css">
<title>Foldoutmenue Horizontal</title>

<style type="text/css" media="screen">
<!--
body
{
	font-family: Verdana, sans-serif;
	font-size: 14px;
	overflow: auto;
	padding: 10px;
	margin: 0px;
}

ul, li
{
	list-style-type: none;
	padding: 0px;
	margin: 0 auto;
}

.menu
{
	position: absolute;
	z-index: 3;
	top: 10px;
}

.menu li
{
	width: 140px;
	float: left;
}

.menu a
{
	border: 1px solid #888;
	background-color: #fff;
	text-decoration: none;
	text-align: center;
	font-weight: bold;
	cursor: default;
	margin: 0px 2px;
	display: block;
	height: 20px;
	color: #000;
}

.menu a:hover
{
	background-color: #ccc;
}

#smenu1, #smenu2, #smenu3, #smenu4, #smenu5
{
	font-size: 12px;
	display: none;
	width: 140px;
	float: left;
}

#smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a, #smenu5 a
{
	font-weight: normal;
	padding-top: 2px;
	border-top: 0px;
	cursor: pointer;
}
//-->
</style>

<script type="text/javascript">
<!--
function montre(id)
{
	with (document)
	{
		if (getElementById)
			getElementById(id).style.display = 'block';
		else if (all)
			all[id].style.display = 'block';
		else
			layers[id].display = 'block';
	}
}

function cache(id)
{
	with (document)
	{
		if (getElementById)
			getElementById(id).style.display = 'none';
		else if (all)
			all[id].style.display = 'none';
		else
			layers[id].display = 'none';
	}
}
//-->
</script>

</head>
<body>

<div class="menu">
  <ul>
    [*][url="javascript:void(0);"]Menu 1[/url]
      <ul id="smenu1" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">
        [*][url=""]Subkategorie 1.1[/url]
        [*][url=""]Subkategorie 1.2[/url]
        [*][url=""]Subkategorie 1.3[/url]
      [/list]
    

    [*][url="javascript:void(0);"]Menu 2[/url]
      <ul id="smenu2" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">
        [*][url=""]Subkategorie 2.1[/url]
        [*][url=""]Subkategorie 2.2[/url]
      [/list]
    

    [*][url="javascript:void(0);"]Menu 3[/url]
      <ul id="smenu3" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">
        [*][url=""]Subkategorie 3.1[/url]
        [*][url=""]Subkategorie 3.2[/url]
        [*][url=""]Subkategorie 3.3[/url]
        [*][url=""]Subkategorie 3.4[/url]
        [*][url=""]Subkategorie 3.5[/url]
      [/list]
    

    [*][url="javascript:void(0);"]Menu 4[/url]
      <ul id="smenu4" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">
        [*][url=""]Subkategorie 4.1[/url]
        [*][url=""]Subkategorie 4.2[/url]
        [*][url=""]Subkategorie 4.3[/url]
      [/list]
    

 [*][url="javascript:void(0);"]Menu 5[/url]
      <ul id="smenu5" onmouseover="montre('smenu5');" onmouseout="cache('smenu5');">
        [*][url=""]Subkategorie 5.1[/url]
        [*][url=""]Subkategorie 5.2[/url]
        [*][url=""]Subkategorie 5.3[/url]
        [*][url=""]Subkategorie 5.4[/url]
        [*][url=""]Subkategorie 5.5[/url]
      [/list]
    	
  [/list]
</div>

</body>
</html>
```


----------



## mrlounge (9. Sep 2007)

es ist immer am linken rand, es sollte aber mittig sein.


----------



## Gast (27. Nov 2007)

Hallo,
setze den wert bei (ul, li )margin: 0 auto;  nur auf 0px und auto entfernen,....dann läuft es!!!!
Gruß Mike


----------

