горизонтальное выравнивание блока фиксированной ширины

[cyklop77]

помогите пожалуйста горизонтально выравнять вложенные пункты меню относительно родительских

 

jsfiddle

 

здесь каждый пункт меню верхнего уровня имеет белую полосу, которая появляется при наведении на пункт. видно, что блок с вложенными пунктами смещён по горизонтали относительно этой полосы. в этом проблема

 

для облегчения задачи я задал жёстко ширину блока с вложенными пунктами. но если подскажете решение для блока неизвестной ширины, будет ещё лучше

 

хотелось бы получить решение очень кроссбраузерное. даже за счёт красоты кода

[Q4Dizzy]

.nav_top_inner > ul > li ul {

    width: 150px;

    margin-left: -75px;

    left: 50%;

    z-index: 10;

    box-sizing:border-box;

}

[Q4Dizzy]

Вы хотите, что бы ul второго уровня выравнивался по центру пункта первого уровня?

[cyklop77]

Вы хотите, что бы ul второго уровня выравнивался по центру пункта первого уровня?

да

[cyklop77]

спасибо

[Q4Dizzy]

Если ширина не задана у ul второго уровня и li-родителя, то считаем процентный вариант

.nav_top_inner > ul > li ul {    width: 100%;    margin: 0 0 0 -50%;}

но если пункт меню маленький, то и подменю будет маленьким...

Edited March 14, 2015 by Q4Dizzy