最佳显示为一个小提琴： http://jsfiddle.net/Jnttm/

Best shown with a Fiddle: http://jsfiddle.net/Jnttm/

我怎样才能得到子菜单的父菜单项下的中心？很多定心的技巧，我发现不适用，因为子元素是比父母更广泛。

How can I get the sub-menu to center underneath the parent menu-item? A lot of the centering tricks I've found don't apply because the child element is wider than the parent.

这可能与纯CSS或者我不得不求助于的JavaScript？ 如果JS要求没有任何人有JQuery的code得心应手这样做？

Is this possible with pure CSS or do I have to resort to javascript? If JS is required does anyone have JQuery code handy for doing this?

推荐答案

可能是你必须定义一个默认的宽度您子菜单是这样的：

May be you have to define a default width to your submenu like this :

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