Сохранять высоту границы одинаково для всех LI

Question

У меня есть меню с вложенными UL. Есть ли способ только для CSS, чтобы вертикальная граница оставалась высотой самого высокого набора элементов меню? Имейте в виду, что это меню является динамическим, поэтому можно изменять ширину и высоту.

http://jsfiddle.net/simply_simpy/Kmyjr/

Answer 1

Вы можете удалить float:left правило и добавить в display:table-cell правила.

jsFiddle example.

CSS:

#menu-secondary_menu > li { 
    border-left: 1px solid #7d7d7d; 
    display: table-cell; 
    font-size: 9px; 
    line-height: 16px; 
    text-transform: uppercase; 
    color: #7d7d7d; 
    padding: 0 10px 0; 
    margin: 0 10px 0; 
}