How to center drop down menu?

Question

thank you for your time today to help me solve this CSS issue.

I'm got the navigation menu set up (top nav = main-nav) as I'd like it but I can't for the life of me figure out a way to center align the drop down (second level of navigation) to its parent navigation item, without effecting the current layout or functionality.

The navigation list was tricky to set up with the menu in the middle and to still be dynamic via Wordpress. I used a combination of display:table and display:table-cell to do this. The top level of the navigation looks great but the drop down secondary levels are off aligned.

Any advice would be greatly appreciated. Thanks in advance! Cheers,

Answer 1

adding a width to your ul li centers the child nav. working fiddle here: http://jsfiddle.net/ktFJg/

 .nav ul {
    font-size:12px;
    width:1140px;
    text-align:center;
    display:table;
}
.nav ul, .nav ul li {
    float:none;
}
.nav ul li {
    margin-left:20px;
    width:100px;
}
.nav ul li ul {
    text-align:left;
    display:-inline-block;
    border:none;
}
.nav li {
    float:none;
    display:inline-block;
    display:table-cell;
    vertical-align:middle;
    color:#000;
}
.nav ul li a, nav ul li a:active {
    color:#000;
}
.nav ul li a:hover {
    color:#c0c0c0;
}