<nav class="nav">
  <ul>
    <li><a href="#1"><span>HOME</span></a></li>
    <li><a href="#2"><span>ABOUT</span></a></li>
    <li><a href="#3"><span>CONTACT</span></a></li>
    <li><a href="#4"><span>PORTFOLIO</span></a></li>
    <li><a href="#5"><span>CATEGORY</span></a></li>
  </ul>
</nav>
*{
  box-sizing:border-box;
}
body {
  color:#fff;
  font-family:メイリオ;
  margin:0;
  padding:0;
}
.nav {
  background:#F27398;
  box-shadow: 0 2px 5px #ccc;
  display:-webkit-flex;
  display:flex;
  -webkit-justify-content:center;
  justify-content:center;
  width:100%;
  ul {
    display:-webkit-flex;
    display:flex;
    -webkit-flex-wrap:wrap;
    flex-wrap:wrap;
    list-style:none;
    margin:0;
    padding:0;
    li {
      -webkit-flex:1 1 auto;
      flex:1 1 auto;
      a {
        color:#fff;
        display:-webkit-flex;
        display:flex;
        -webkit-justify-content:center;
        justify-content:center;
        text-decoration:none;
        padding:20px 0;
        span {
          border-left:1px solid #fff;
          padding:0 20px;
        }
      }
      &:last-child span{
          border-right:1px solid #fff;
      }
    }
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.