hover時のレイアウト崩れ

hoverの時にborder-bottomをすると

liの下に線が付いてしまいレイアウトが崩れてしまいます。

liの中に線を入れるとレイアウトが崩れません

その時に必要なのが、line-heightとheightです。

#nav li {
    height: 50px;
}

#nav li a {
    line-height: 47px;
}

#nav li a:hover {
    border-bottom: 3px solid #F00;
}

とliの高さをheightで決めて、li a のline-heightを下線の分だけ少なくし、

border-bottomをすると上のようにレイアウトが崩れずにできます。