<nav>
    <ul>
        <li><a href="#">Menu 1</a></li>
        <li><a href="#">Menu 2</a></li>
        <li><a href="#">Menu 3</a></li>
        <li><a href="#">Menu 4</a></li>
        <li><a href="#">Menu 5</a></li>
    </ul>
</nav>

body {
  background: #666;
  font-family: 'Lato', sans-serif; }

nav {
  width: 15%;
  min-width: 200px;
  margin: 80px 42.5%;
  background: #eee; }

nav ul {
  list-style: none;
  padding: 0px; }

nav li {
  float: none;
  width: 100%; }

nav li a {
  display: block;
  padding: 20px;
  position: relative;
  z-index: 2;
  text-decoration: none;
  color: #444; }

nav li a:hover { 
  border-bottom: 0px;
  color: #fff; }

nav li:first-child a { border-left: 10px solid #BAC358; }
nav li:nth-child(2) a { border-left: 10px solid #62BDCF; }
nav li:nth-child(3) a { border-left: 10px solid #E05735; }
nav li:nth-child(4) a { border-left: 10px solid #af821b; }
nav li:last-child a { border-left: 10px solid #837D63; }

nav li a:after {
  content: "";
  height: 100%;
  left: 0;
  top: 0;
  width: 0px;
  position: absolute;
  transition: all 0.3s ease 0s;
  -webkit-transition: all 0.3s ease 0s;
  z-index: -1; }

nav li a:hover:after { width: 100%; }
nav li:first-child a:after { background: #BAC358; }
nav li:nth-child(2) a:after { background: #62BDCF; }
nav li:nth-child(3) a:after { background: #E05735; }
nav li:nth-child(4) a:after { background: #af821b; }
nav li:last-child a:after { background: #837D63; }