使用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/