Buon girono a tutti.

ho un dilemma da un bel po' di tempo e alla fine ho ceduto e chiedo a voi esperti maghi dei css.
Il mio problema è anche banalissimo perchè consiste nel centrare un <ul> modificato un po' per farlo apparire come un menu orizzontale. vi posto il codice. (l'html è creato tramite uno script php ma vi mostro subito il codice html - css)

HTML:
codice:
<div id="header_centrale_search">
	
	<form style="border:0px; width:100%;" id="form_search" name="form_ricerca" method="get" action="search.php" onsubmit="javascript:if(document.getElementById('text_search').value == 'Ricerca...') return false;">
		<div id='menu'>
<ul>
<li id='livello_1_campo_1' title='Home'>Home

<li id='livello_1_campo_2' title='Chi Siamo'>Chi Siamo

<li id='livello_1_campo_3' title='Contatti'>Contatti

			<li id='id_ricerca_menu'>
				<div class='classe_ricerca'>
					<input type="text" id="text_search" name="nome" title="Ricerca nel nostro listino dei vini!" tabindex="" value='Ricerca...' size='10' onclick='javascript:if(this.value =="Ricerca...") this.value= "";' onBlur ='javascript:if(this.value =="") this.value="Ricerca..."'/>
					<input type="submit" style='cursor:pointer;' id="submit_search" value="Vai" name='Ricerca' title="Effettua la tua ricerca!" tabindex=""/>
				</div>
			
			<li id='id_ricerca_avanzata' style=''>
				Ricerca Avanzata
			
		[/list]
		</div>
		</form>
</div>
CSS
codice:
#menu {
	padding:0;
	background:transparent;
	width:100%;
	height:37px;
}
#menu ul {
	padding:0px;
	margin:0px auto;
	background:transparent;
	height:37px;
	width:100%;
	text-align:center;
}
 
#menu li {
	position: relative;
	float: left;
	list-style: none;
	margin:0px auto;
	padding:0;
} 
 
#menu li a {
	height: 35px;
	display: block;
	padding: 0 3px;
	text-decoration:none;
	text-align: center;
	line-height: 39px;
	color: white;
	border-right:2px solid black;
	border-bottom:3px solid black;
	border-radius:10px;
	background-color:#993C77;
} 
#menu li:hover {
background-color:#FF7DCC;
border-radius:10px;
}
#menu li a:hover {
	background-color:#FF7DCC;
	text-decoration:underline;
}
 
#menu ul ul {
	position: absolute;
	top: 35px; 
	z-index: 1000;
	display:none;
} 
 
#menu ul ul li a {
	width:200px;
	height: 35px;
	display: block;
	text-decoration:none;
	text-align: center;
	line-height: 39px;
	background-color: #660066;
	color: #fff;
	border:1px dotted red;
} 
 
#menu ul ul li a:hover {	
	background-color:#FF7DCC;
}
#menu ul li:hover ul {
	display:block;
}
.classe_ricerca {
	height: 35px;
	display: block;
	text-align: center;
	line-height: 39px;
	color: white;
	position: relative;
	list-style: none;
	margin:0;
	border-right:2px solid black;
	border-bottom:3px solid black;
	padding:0 1px;
        border-radius:10px;
	background-color:#993C77;
}
.classe_ricerca:hover {
        border-right:2px solid black;
	border-bottom:3px solid black;
	border-radius:10px;
	background-color:#FF7DCC;
}
nel css non sono una cima e lo avevo creato per avere almeno due livelli... però poi non c'è stato bisogno ma l'ho lasciato...

l'unica cosa che vorrei è che questo menu venga centrato... ne ho provate molte ma non ho ottenuto quello che volevo =( chiedo a voi ora =)

Grazie per l'aiuto!