使用 css 将水平子菜单置于父级下方居中

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

如何使子菜单位于父菜单项下方的中心？我发现的许多居中技巧并不适用，因为子元素比父元素更宽。

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

可能你必须定义一个默认值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/