hover時にborder-bottomをした際に要素がborderの太さ分、下に伸びてしまう

Question

ナビゲーションのhover時に下線が表示されるようにしたのですが、
表示された際にborderの太さ分、下に要素がのびてしまいます。
hover時のcssにbox-sizing:border-box;を設定すればいいのかと思い試してみましたが、ダメでした。
お分かりになる方、よろしくお願いいたします。

<div id="sub-navigation">
            <ul>
                <li><a href="#">宿泊プラン</a></li>
                <li><a href="#">客室紹介</a></li>
                <li><a href="#">朝食のご案内</a></li>
                <li><a href="#">夕食のご案内</a></li>
                <li><a href="#">ルームサービス</a></li>
            </ul>
        </div>

#sub-navigation{
    background-color: #efecec;
  }

#sub-navigation ul{
    display: table;
    width:80%;
    padding: 0 ;
    margin:0 auto;
    background-color: #efecec;
}

#sub-navigation ul li {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    table-layout: fixed;
    width: 10%;
    min-width: 50px;
    list-style-type: none;
    color: #5f5f5f;
    transition: color 0.3s;
    border-right: 1px solid #aeaeae;
    border-left: 1px solid #aeaeae;
    background-color: #efecec;
    margin-bottom:0 ;
}

#sub-navigation li+ li{
    border-left:0;
    border-right: 1px solid #aeaeae;
}

#sub-navigation ul li:hover {
    border-bottom:4px solid #22224d;
    transition: 0.3s;
    box-sizing: border-box;
}

#sub-navigation ul li a {
    display: block;
    color: #5f5f5f;
    text-align: center;
    text-decoration: none;
    font-size: 13px;
    padding: 8px 0;
}

Answer 1

li要素のheightの値が(追加されるボーダーを表示するには)不足していることが、下に要素が伸びる原因です。

十分なheightを設定すれば(box-sizingがborder-boxに設定されているので)伸びなくなりますが、今度はli要素内でボーダーの幅だけ文字が上にずれます。

文字をずらしたくないのであれば、

#sub-navigation ul li {
    (中略)
    border-bottom: 4px solid transparent;
}

のように、あらかじめボーダーを透明色で描いておけばいいのでは。

Comments

[sanayaaan]

おかげさまで無事解決することが出来ました。大変助かりました。
ありがとうございました。