css - CSS：垂直メニューの幅を修正するにはどうすればよいですか？

Question

各liアイテムをまったく同じ幅にしようとしています。たとえば、長いテキストulがある場合は、残りのulを同じサイズにするか、幅のサイズを制限して、最長のulが2行に分割できるようにします。

黄色の左側の列メニューを参照してください。これは私が持っているものです：

そしてこれが私が目指していることです：

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