如何居中下拉菜单？

Question

感谢您今天抽出时间帮我解决这个 CSS 问题。

我已经按照自己的意愿设置了导航菜单（顶部导航 = 主导航），但我终其一生都无法找到居中对齐下拉菜单的方法（第二级navigation) 到其父导航项，而不影响当前布局或功能。

导航列表很难在中间设置菜单并通过 Wordpress 仍然是动态的。我使用了 display:table 和 display:table-cell 的组合来执行此操作。 导航的顶层看起来不错，但下拉的二级导航没有对齐。

任何建议将不胜感激。提前致谢！干杯，

Answer 1

为您的 ul li 添加宽度使子导航居中。在这里工作小提琴：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;
}