CSS: Как исправить ширину вертикального меню?

Question

Я пытаюсь сделать каждый элемент li точно такой же ширины. Например, если есть длинный текст ul, то остальная часть ul s того же размера ИЛИ имеет ограниченную ширину, поэтому самый длинный ul может тормозить на две линии.

См. Меню слева в желтом цвете. Это то, что у меня есть:

И это то, что я стремлюсь:

CSS

#menu-esde li a { 
    background-color: #FFC477; 
    border: 1px solid white; 
    color: #FFFFFF; 
    float: right; 
    font-size: 20px !important; 
} 
#secondnav li a, #menu-esde li a { 
    background-color: #FFC477; 
    border: 1px solid white; 
    color: #FFFFFF; 
    float: right; 
    font-size: 20px !important; 
} 
#secondnav li a { 
    border: medium none; 
    display: block; 
    padding: 3px 8px; 

Сайт: http://npmaudiovisual.com/esde/?page_id=36

Answer 1

Просто обновите ваш CSS с моим CSS: -

#secondnav li a, #menu-esde li a { 
    background-color: #FFC477; 
    border: 1px solid white; 
    color: #FFFFFF; 
    float: right; 
    font-size: 20px !important; 
    text-align: left; 
    width: 205px; 
} 

см результат прилагается изображение согласно вашему требованию: -

Answer 2

Только теперь добавить этот CSS

#secondnav ul li { 
    overflow: hidden; 
    width: 184px; 
} 

    #secondnav li a, #menu-esde li a { 
     display: block; 
     text-align: left; 
float:right; // remove this line 
    } 

Answer 3

ul#menu-esde li { 
    border-bottom: 1px solid #YOUR COLOR; 
    height: 42px; 
    list-style: none outside none; 
    width: 100%; 
} 
ul#menu-esde li a { 
    background-color: #YOUR COLOR; 
    color: #YOUR COLOR; 
    display: block; 
    font-weight: bold; 
    line-height: 42px; 
    padding: 0 20px; 
    text-decoration: none; 
}