使用html和CSS将菜单居中出现问题

Question

Hello I am having trouble centering this menu. I have tried changing the margins and also using the center tag and using a div with no success. Any help would be greatly appreciated. Thanks!

Here is the JSFiddle: http://jsfiddle.net/G8gE2/

Here is the css:

ul# nave {
    margin - left: auto;
    margin - right;
    auto;
}
ul.drop a {
    display: block;
    color: #fff;
    font - family: arial;
    font - size: 18px;
    text - decoration: none;
}
ul.drop, ul.drop li, ul.drop ul {
    list - style: none;
    margin: ;
    padding: 0;
    border: 1px solid# fff;
    background: #009933; color:       # fff;
}
ul.drop {
    position: relative;
    z - index: 597;
    float: left;
}
ul.drop li {
    float: left;
    line - height: 1.3em;
    vertical - align: middle;
    zoom: 1;
    padding: 5px 10px;
}
ul.drop li.hover, ul.drop li: hover {
    position: relative;
    z - index: 599;
    cursor: default;
    background: #1e7c9a; }
     ul.drop ul{visibility:hidden; position: absolute; top:100%; left:  0;z-    index:598; width:195px; background:# 009933;
    border: 1px solid# fff;
}
ul.drop ul li {
    float: none;
}
ul.drop ul ul {
    top: -2px;
    left: 100 % ;
}
ul.drop li: hover > ul {
    visibility: visible
}

Answer 1

To align div in the middle you need to give width to your ul. that is

ul#nave
{
    width:500px;
}

and remove float:left from CSS ul.drop

Answer 2

You could add the following css:

#nave {
    margin: 0 auto;
    width: 400px;
    float: none;
}

You need to define a fixed width to your menu so it could be centered.

http://jsfiddle.net/G8gE2/1/

Answer 3

Put this css to center your menu: CSS:

ul.drop {
margin: 0 auto;
position: relative;
width: 315px;
z-index: 597;

}

Answer 4

Try this

ul#nave {
    margin: 0 auto;
    width: 50%;
    float:none
}

OR

<div style="display: table; margin-right: auto; margin-left: auto;">
//Your Codes
</div>

DEMO

Answer 5

You can:

• Wrap it with a container, with text-align: center and 100% width;
• Make the nave inline-block and remote the float: left

http://jsfiddle.net/G8gE2/3/

#menu_wrapper {
   width: 100%;
   text-align: center;
}
ul#nave {
   display: inline-block;   
}

Answer 6

#nave li:hover ul {
    left: -50%;
}

I added the above to your code

Updated Fiddle Demo of Yours

Hope this helps

Happy coding