Centrer un menu roll-over horizontal

Bonjour,

J'aimerais avoir un peu d'aide car j'avoue que je suis perdu avec ce satané menu à centrer.

Voilà le code :
le html:

<ul>
	<li><a id="menu1" title="menu1" accesskey="1" href="#">Menu 1</a></li>
	<li><a id="menu2" title="menu2" accesskey="2" href="#">Menu 2</a></li>
	<li><a id="menu3" title="menu3" accesskey="3" href="#">Menu 3</a></li>
	<li><a id="menu4" title="menu4" accesskey="4" href="#">Menu 4</a></li>
	<li><a id="menu5" title="menu5" accesskey="5" href="#">Menu 5</a></li>
</ul>

le css:

[#red]ul, li {	/* list use for the menu  */
list-style-type: none;	/* suppression of list markers */
margin:0;
padding:0;
}

ul {
	position: absolute;	/* general menu background */
	width: 810px;
	height: 30px;
	text-align: center;
	background-color: transparent;
	background-image: url(images/bg_menu_off.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	left: 119px;
	top: 137px;
}

li {float: left;}

li a {	/* buttons dimensions and definitions */
display: block;	/* <a> placed in block to give it dimensions */
height: 30px;
width: 162px;
color: #9966FF;
font-size: 14px;
line-height: 30px;	/* line height to avoid paddings */
font-weight: bold;
font-family: arial, serif;
text-decoration: none;
}

li a:hover {
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: left top;
	background-image: url(images/bg_menu_on.jpg);
}

a#menu1:hover {
background-position: -0px 0%;	/* background place offset for each button */
}
a#menu2:hover {
background-position: -162px 0%;
}
a#menu3:hover {
background-position: -324px 0%;
}
a#menu4:hover {
background-position: -486px 0%;
}
a#menu5:hover {
background-position: -648px 0%;
}

merci, à tous.

Bonsoir falco62 (du ch'nord ? )

As-tu jeté un oeil (ou même les deux ) dans cette bonne vieille FAQ ?

Cdt,
Sylvain
Modifié par Julien Royer (03 Jul 2008 - 00:42)