web022 hover(border-bottom)でリストがずれないやり方

hover(border-bottom)でリストがずれないやり方

■考え方
あらかじめborder-bottomを入れておく。
色は背景色ど同色にしておき、hover時に上書きで色を変更する。
※レスポンシブ対応でliを上下させた際にガタガタとカラム落ちする場合があるためそれの防止の１つ。

■サンプル

<nav>
<ul>
<li><a href="#">AA</a></li>
<li><a href="#">BB</a></li>
<li><a href="#">CC</a></li>
</ul>
</nav>

nav{
  width: 300px;
  height: 50px;
  background-color: #ff0;
  overflow: hidden;
  margin: 10px auto;
}
nav li{
  box-sizing: border-box;
  width: 100px;
  height: 50px;
  border-right: 1px solid #fff;
  float:left;
  border-bottom: 2px solid #ff0; /*初期値で入れておく*/
}
nav li:hover{
  border-bottom: 2px solid #220;/*hoverで色変更*/
}
nav li:last-child{ border-right: none;}

/*本来はa要素に対してborderをかけておくのが良いが、
サンプルなためliに記載*/