Центрирование горизонтального подменю ниже родительского с помощью 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/

Answer 2

Это будет центрировать подменю: ul > ul.sub-menu { position: absolute; left: 50%; transform: translateX(-50%) }