html - 如何居中下拉菜单？

Question

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

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

导航列表很难在中间设置菜单并通过 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;
}