Menu deroulant à l'horizontale

Bonjour,

Je m'arrache la tête sur un menu deroulant en css sans javascript pour l'instant.
J'ai un menu avec 2 niveaux. Quand on passe sur les items du premier niveau je fais
s'afficher les items du second niveau. Le tout à l'horizontale. Mais impossible de
centrer le contenu des items du second niveau... Quelqu'un aurait-il une idée ?

Voici le code css :

/* menu gene */

.menu { 
	font: bold 12px "Trebuchet MS", arial, verdana, sans-serif;
	text-transform:uppercase;
	width:1000px;
	height:30px;
	position:relative;
	margin:20px 0 60px 0;
	background:#fff;
	z-index:100;
}

/* menu rubriques niveau I */

.menu ul {
	padding:0;
	margin:0;
	list-style: none;
}
.menu ul li {
	float:left;
	border-left:1px solid #eee;
	text-align:center;
}

.menu ul li a, .menu ul li a:visited {
	display:block;
	width:160px;
	text-decoration:none;
	padding:0 0 0 5px;
	height:30px;
	line-height:30px;
	color:#fff;
	background:#c33;
}
.menu ul li:hover a,
.menu ul li a:hover {background:#4c9ecc; color:#fff;}

/* menu rubriques niveau2 en invisible positionné en absolu par rapport au bloc parent */
.menu ul li ul {visibility:hidden; position:absolute; top:30px;}


/* on passe en visible les sous menus qd on est sur le li et sur le lien du li */
.menu ul li:hover ul,.menu ul li a:hover ul {visibility:visible; float:left;}

/* menu rubriques niveau II */
.menu ul li:hover ul li a,
.menu ul li a:hover ul li a {display:inline; padding:0 10px 0 10px; background:#fff; color:#4c9ecc;}

.menu ul li:hover ul li a:hover,
.menu ul li a:hover ul li a:hover {background:#4c9ecc; color:#fff;}

et le code html

<div class="menu">

<ul>
<li><a href="#">actualite</a>
	<ul class="1">
		<li><a href="#">A la une</a></li>
		<li><a href="#">Région</a></li>
		<li><a href="#">Infos Villes</a></li>
		<li><a href="#">Infos Villages</a></li>
		<li><a href="#">France</a></li>
		<li><a href="#">Monde</a></li>
	</ul>
	
</li>
<li><a href="#">sports</a>
	
	<ul class="2">
		<li><a href="#" title="Tout le sport">A la une</a></li>
		<li><a href="#" title="Rugby">Rugby</a></li>
		<li><a href="#" title="Football">Football</a></li>
		<li><a href="#" title="Hand/Basket">Hand/Basket</a></li>
		<li><a href="#" title="Auto/Moto">Auto/Moto</a></li>
		<li><a href="#" title="Tennis">Tennis</a></li>
		<li><a href="#" title="Sport régional">Région</a></li>
		<li><a href="#" title="Sport départemental">Département</a></li>
		<li><a href="#" title="Hippisme">Hippisme</a></li>
	</ul>

</li>
<li><a href="#">Multimedia</a>
	
	<ul>
		<li><a href="#" title="Vidéos">Vidéos</a></li>
		<li><a href="#" title="Diaporamas">Diaporamas</a></li>
		<li><a href="#" title="Podcast">Podcast</a></li>
	</ul>
	
</li>
<li><a href="#">Loisirs</a>
	
	<ul>
		<li><a href="#" title="Culture">Culture</a></li>
		<li><a href="#" title="Cinéma">Cinéma</a></li>
		<li><a href="#" title="People">People</a></li>
		<li><a href="#" title="Recette">Recette</a></li>
		<li><a href="#" title="Restaurant">Restaurant</a></li>
		<li><a href="#" title="Sortie">Sortie</a></li>
		<li><a href="#" title="Exposition">Exposition</a></li>
		<li><a href="#" title="Spectacle">Spectacle</a></li>
		<li><a href="#" title="High Tech">High Tech</a></li>
		<li><a href="#" title="Tauromachie">Tauromachie</a></li>
	</ul>
	
</li>
<li><a href="#">Annonces</a>
	
	<ul>
		<li><a href="#" title="Emploi">Emploi</a></li>
		<li><a href="#" title="Immobilier">Immobilier</a></li>
		<li><a href="#" title="Auto">Auto</a></li>
		<li><a href="#" title="Rencontres">Rencontres</a></li>
		<li><a href="#" title="Marchés publics">Marchés publics</a></li>
		<li><a href="#" title="Carnets">Carnets</a></li>
	</ul>
	
</li>
<li><a href="#">Services</a>
	
	<ul>
		<li><a href="#" title="Abonnements">Abonnements</a></li>
		<li><a href="#" title="Boutiques">Boutiques</a></li>
		<li><a href="#" title="Archives">Archives</a></li>
		<li><a href="#" title="Horoscope">Horoscope</a></li>
		<li><a href="#" title="Contact">Contact</a></li>
	</ul>
	
</li>

</ul>

</div>

Merci !