使用CSS将水平子菜单居中放置在父级下方

Question

最好使用Fiddle查看：http://jsfiddle.net/Jnttm/

如何使子菜单居中于父菜单项下方？我找到的大部分居中技巧都不适用，因为子元素比父元素更宽。

这是否可以使用纯CSS实现，还是必须要使用JavaScript？
如果需要JS，是否有人有用于此的JQuery代码？

- Davy8

Answer 1

也许您需要为您的子菜单定义一个默认的宽度，像这样：

.sub-menu {
    display: none;
    position: absolute;
    top: 20px;
    left: 0;
    white-space: nowrap;
    text-align:center;
    left:50%;
    margin-left:-150px;
    width:300px;
}
.active .sub-menu {
    display:block;
}

Check this http://jsfiddle.net/sandeep/Jnttm/1/

- sandeep

---

给我点踩的人，请解释一下我哪里做错了。 - sandeep

不确定是谁给我点了踩，但这正是我所要求的。如果子菜单有背景，它将比内容更宽，因此它不起作用，但在我的情况下它有效。 （现在我已经实施了它，但是由于子项数量不对，它看起来不太对，但这不是问题:p） - Davy8

Answer 2

这将使子菜单居中: ul > ul.sub-menu { 位置: 绝对定位; 左侧: 50%; 变换: 平移X轴(-50%) }

- ashvek