使用css在父级下方居中水平子菜单答案

【问题标题】：Centering horizontal submenu below parent with css使用css在父级下方居中水平子菜单
【发布时间】：2011-12-16 05:07:08
【问题描述】：

最好用小提琴显示：http://jsfiddle.net/Jnttm/

如何让子菜单在父菜单项下方居中？我发现的许多居中技巧都不适用，因为子元素比父元素宽。

这可以通过纯 CSS 实现还是我必须求助于 javascript？
如果需要 JS，是否有人有方便的 JQuery 代码来执行此操作？

【问题讨论】：

标签： css centering submenu alignment

【解决方案1】：

您可能必须像这样为您的submenu 定义一个默认的width：

.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;
}

查看http://jsfiddle.net/sandeep/Jnttm/1/

【讨论】：

投反对票的人请解释我哪里错了
不确定谁投了反对票，但这正是我所要求的。如果子菜单上有背景，它就行不通，因为它比内容更宽，但在我的情况下它是有效的。（虽然现在我已经实现了它，但子项目的数量看起来不太正确，但这不是问题：p）

【解决方案2】：

这将使子菜单居中： ul > ul.sub-menu { position: absolute; left: 50%; transform: translateX(-50%) }

【讨论】：