Centrer un menu horizontal déroulant

Bonjour,

voila j'ai créer un menu horizontal déroulant, qui marche parfaitement, cependant je n'arrive pas à le centrer. J'ai bien réussi à le centrer grossièrement, mais quand je change de résolution, il ne l'est plus. Donc comment faire pour qu'il le soit pour chaque résolution? (avec le code que je vais donné, le menu se trouve à gauche)

Voici le code xhtml:
<div align="center" id="menu_deroulant">
<ul>
<li>
<a href="#">Accueil</a>
</li>
<li>
<a href="#">Membres</a>
<ul>
<li><a href="#">Connexion</a></li>
<li><a href="#">Inscription</a></li>
</ul>
</li>
<li>
<a href="#">Divers</a>
<ul>
<li><a href="#">Forum</a></li>
<li><a href="#">Liens</a></li>
<li><a href="#">Nous contacter</a></li>
<li><a href="#">Recherche</a></li>
</ul>
</li>
<li>
<a href="#">Mythologie</a>
<ul>
<li><a href="#">Grecque</a>
<ul>
<li><a href="#">Zeus</a></li>
<li><a href="#">Hades</a></li>
</ul>
</li>
<li><a href="#">Romaine</a></li>
</ul>
</li>
<li>
<a href="#">Mystères</a>

</li>
</ul>
</div>


Et le code CSS:

#menu_deroulant
{
height: 10px;
margin: 0 auto;
width:100%;
margin-bottom:2%;
font-weight : bold;
font-family : "Comic Sans MS", Arial, "Arial Black", "Times New Roman", Times, serif;
font-size : 12px;
}
#menu_deroulant ul /* Liste */
{
padding : 0;
margin: 0;
list-style-type : none;
line-height : 21px;
text-align : center;
}
#menu_deroulant li /* Elements des listes */
{
float : left;
margin:auto;
padding:0;
background : #003b71;
border-right : 1px solid #fff;
}
#menu_deroulant li a /* Contenu des listes */
{
display : block;
padding : 3px;
color : #fff;
text-decoration : none;
width : 100px;
}
#menu_deroulant li ul
{

position:absolute;
}
#menu_deroulant ul li ul /* Sous-listes */
{
display:none;
position: absolute;

left: -200em;
}
#menu_deroulant ul li:hover ul
{
display:block;
}
#menu_deroulant li:hover ul li
{
float:none;
}
#menu_deroulant li ul li /* Éléments de sous-listes */
{
border-top : 1px solid #fff;
}
#menu_deroulant li ul ul
{
margin : -28px 0 0 106px ;
border-left : 1px solid #fff ;
}
#menu_deroulant a:hover /* Lorsque la souris passe sur un des liens */
{
color: #000;
background: #bfd0ff;
}
#menu_deroulant li:hover ul ul, #menu_deroulant li.sfhover ul ul /* Sous-sous-listes lorsque la souris passe sur un élément de liste */
{
left: -200em;
}

#menu_deroulant li:hover ul, #menu_deroulant li li:hover ul, #menu_deroulant li.sfhover ul, #menu_deroulant li li.sfhover ul /* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */
{
left: auto;
min-height: 0;
}


Merci.