導航菜單不居中包裝div，空白：0自動;不起作用

Question

我試圖讓我的導航菜單位於頁面的中心。

我從土特修改了代碼示例：

http://jsfiddle.net/B5qkF/

也就是說，我後是藍色菜單，在包裝的中間出現（注：包裝是寬度100％）

<div id="menu-wrapper"> 
    <ul id="menu"> 
     <li>...</li> 
     <li>... 
      <ul> 
       <li>...</li> 
      </ul> 
     </li> 
     <li>...</li> 
    </ul> 
</div> 

我已經嘗試添加margin: 0px auto;到#menu-wrapper和#menu但既不工作。雖然手動設置margin: 0px 100px;的確有竅門。

此外，當我將鼠標懸停在子菜單按鈕（橙色按鈕）上時，會出現溢出 - 右側顯示淡橙色突出顯示溢出。有沒有辦法刪除它？

Answer 1

我希望你是這樣看： - DEMO

CSS

#menu { 

    margin: auto; 
    overflow: hidden; 
    width: 800px; 
} 

Answer 2

您應該使用margin: 0px auto;來#menu-wrapper下面，而不是試圖居中#menu

#menu-wrapper{ 
text-align: center; 
}