[Jean le Chauve]

C'est celui-ci que tu dois essayer :

Code :

.container {clear:both; float:left; width:100%; overflow:hidden;}
#menu2 {
  padding:0;
  margin:0 auto;
  list-style-type:none;
  float:left;
  position:relative;
  left:50%;
  }
#menu2 li {
  float:left; position:relative; right:50%;
  }
#menu2 a {
  width:auto;
  display:block;
  padding:4px 16px;
  color:#fff;
  background:#08c;
  border:1px solid #fff;
  text-decoration:none;
  }
#menu2 a:hover {
  color:#000;
  background:#d4d4d4;
  }
  }

et l'xhtml

Code :

<div class="container">
<ul id="menu2">
<li><a href="#nogo">Tab One</a></li>
<li><a href="#nogo">Tab Two: Longer</a></li>
<li><a href="#nogo">Tab Three: Longest</a></li>
<li><a href="#nogo">Tab Four</a></li>
</ul>
</div>

Je n'ai pas le temps de tester si les sous-menus fonctionnent mais après un petit coup d'oeil, ça devrait aller.