使用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%) }