Wyśrodkowanie menu poziomego w CSS

Mam problem z wyśrodkowaniem tego menu - teraz w takiej postaci jest ono po lewej stronie menu, a chciałbym, aby było na środku. Co zmienić?

#menu { 
text-align: center; 
overflow: hidden; 
font-family: calibri, tahoma;
} 
 
ul#menu li { 
border: 1px solid #d5d5d5; 
list-style-type: none; 
float: left; 
background: #e9e9e9; 
margin-left: 3px; 
text-align: center; 
} 
 
ul#menu li:hover { 
border: 1px solid #d5d5d5; 
list-style-type: none; 
float: left; 
background: #f0f0f0; 
margin-left: 3px; 
} 
 
ul#menu li a { 
display : block; 
padding : 4pt; 
text-decoration : none; 
text-align: center; 
} 
 
ul#menu li li a { 
width: 160px; 
} 
 
ul#menu li li:hover { 
background: white; 
} 
 
ul#menu li ul { 
overflow: hidden; 
display: none; 
} 
 
ul#menu li:hover ul { 
position: absolute; 
background: #aaa; 
padding: 0; 
display: block; 
width: 160px; 
} 

 
#menu
{
margin: 0 auto;
}

albo
#menu
{
display:block;
margin:0 auto;
}

No nie pomogło niestety :(

Mam teraz tak: (pozostałe tak samo jak wcześniej)

#menu { 
text-align: left; 
overflow: hidden; 
font-size: 12px;
margin: 0 auto;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

i "nie działa" -> menu ciągle jest po lewej

Za mało kodu. Najlepiej daj jakiś działający przykład, który można poklikać (jak chcesz to wytnij wszystko inne oprócz menu).

Żeby margin: 0 auto działało, menu musi mieć ustawioną, stałą szerokość. U Ciebie brakuje deklaracji width. Ale nawet wtedy prawdopodobnie nie osiągniesz pożądanego efektu, bo -- jak sądzę -- szerokości menu nie znasz z góry, tj. powinna się ona dostosowywać do poszczególnych opcji.

Rozwiązaniem jest zrezygnowanie z floatów dla <li> oraz:

1. Ustawienie zamiast tego display: inline lub display: inline-block dla <li> (pamiętaj o wykasowaniu deklaracji float, bo nadpisze ona ten punkt).
2. Ustawienie na głównym menu text-align: center.