サンプル

See the Pen Codepen by Tora (@webtoranomaki) on CodePen.

コード

HTML

<nav>
  <ul class="nav__list">
    <li class="nav__item"><a href="#">btn</a></li>
    <li class="nav__item"><a href="#">btn</a></li>
    <li class="nav__item"><a href="#">btn</a></li>
    <li class="nav__item"><a href="#">btn</a></li>
    <li class="nav__item"><a href="#">btn</a></li>
  </ul>
</nav>

CSS

/* base settings */
ul, li {  margin: 0; padding: 0; list-tyle: none;}

.nav__item {
  width: 200px;
  margin-bottom: 2px;
  transition: .3s;
}
.nav__item a {
  display: block;
  padding: 5px;
  color: #ea8a25;
  text-align: right;
  text-decoration: none;
  border: 2px solid #ea8a25;
  border-radius: 0 10px 10px 0;
  background: #ffe7ce;
}
.nav__item:hover {
  width: 300px;
}

マウスを乗せた時に、widthを変えるだけ。font-sizeheightをいじって、文字サイズや高さも変化させることが出来る。