Question

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

我已经设置了导航菜单（顶部nav = main-nav），但我不能为我的生活找到一种方法来对齐下拉（第二级导航到其父导航项，而不影响当前的布局或功能。

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

如何集中下拉菜单？

1 个答案: