<div class="cp_navi05">
<div class="sidenav">
  <a href="#" id="home">Home</a>
  <a href="#" id="news">News</a>
  <a href="#" id="contact">Contact</a>
  <a href="#" id="about">About</a>
</div>
</div>

.cp_navi05 {
  position: relative;
  overflow: hidden;
  width: 360px;
  height:360px;
}
.cp_navi05 a {
  position: absolute;
  left: -110px;
  width: 110px;
  padding: 15px 5px 15px 20px;
  text-decoration: none;
  color: #ffffff;
  border-radius: 0 5px 5px 0;
  transition: all 0.3s;
}
.cp_navi05 a:hover {
  left: -10px;
}
.cp_navi05 #home {
  top: 20px;
  background-color: #da3c41;
}
.cp_navi05 #news {
  top: 80px;
  background-color: #1b2538;
}
.cp_navi05 #contact {
  top: 140px;
  background-color: #2e9b72;
}
.cp_navi05 #about {
  top: 200px;
  background-color: #a62e7a;
}