CodePen Embed - ZqpLmx

<ul>
  <li><a>navi①</a></li>
  <li><a>navi②</a></li>
  <li><a>navi③</a></li>
  <li><a>navi④</a></li>
  <li><a>navi⑤</a></li>
</ul>

ul {
     overflow: hidden;
     letter-spacing: -.5em;
}
li {
     display: inline-block;
     width: 20%;
     vertical-align: middle;
     letter-spacing: 0;
     text-align: center;
}

 li a {
     margin: -4em 0;
     padding: 5em 1em;
     background: #86c0de;
     display :block;
}
 li a:hover {
     background: #68abcd;
}

This Pen is owned by sushi-ramen2014 on CodePen.

See more by @sushi-ramen2014 on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.