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

Question

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

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

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

Answer 1

可能您必须像这样定义默认width值submenu：

.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/

Answer 2

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