html - 导航菜单不在包装 div 的中心，边距 : 0 auto; does not work

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;
}