html - Nav menu does not center in wrapper div, margin: 0 auto; does not work

Question

I'm trying to get my navigation menu to be in the center of the page.

I've modified the code sample from a tute:

http://jsfiddle.net/B5qkF/

That is, what I'm after is for the blue menu to appear in the middle of the wrapper (Note: the wrapper is width 100%)

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

I've tried adding margin: 0px auto; to #menu-wrapper and #menu but neither worked. Although manually setting margin: 0px 100px; does the trick.

Additionally, there is an overflow when I hover over the sub-menu buttons (the orange ones) - the light orange highlight overflows on the right side. Is there a way to remove it?

Answer 1

我希望你看起来像这样：-演示

CSS

#menu {

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

Answer 2

您应该使用margin: 0px auto;to#menu-wrapper而不是尝试在下面将#menu

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