See the Pen Flexbox Animetion Width by webopixel (@webopixel) on CodePen.

HTML

HTMLはシンプルなリストでマークアップしてます。

HTML
<nav id="main-nav">
  <ul>
    <li><a href="#">Green</a></li>
    <li><a href="#">Purple</a></li>
    <li><a href="#">Red</a></li>
    <li><a href="#">Blue</a></li>
  </ul>
</nav>

CSS

重要なとこだけ抜き出してみるとこれだけです。
flexで並べたらwidthをtransitionさせるだけですね。

CSS
#main-nav ul {
    display: -webkit-flex;
    display: flex;
}
#main-nav li {
    width: 100%;
    -webkit-transition: width 0.3s ease-out;
    transition: width 0.3s ease-out;
}
#main-nav li:hover {
    width: 200%;
}

昔はJSとか駆使してがんばらないといけなかったのが、CSS3のFlexbox使うとすごく簡単にできますね。