Centering the horizontal submenu below the parent using css

Question

The best is shown with a script: http://jsfiddle.net/Jnttm/

How to get the submenu in the center under the parent menu? Many of the tricks that I found are not applied because the child is wider than the parent.

Is this possible with pure CSS or do I need to resort to javascript?
If JS is required, does anyone have jQuery code for this?

Answer 1

Maybe you need to specify widththe default submenuas follows:

.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;
}

Check out http://jsfiddle.net/sandeep/Jnttm/1/

Answer 2

: ul > ul.sub-menu { position: absolute; left: 50%; transform: translateX(-50%) }