Centering horizontal submenu below parent with css

Question

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.

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?

Answer 1

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

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

Answer 2

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