<div class="cp_navi">
<div id="cp_sidenav" 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>

*, *:before, *:after {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
.cp_navi {
	position: relative;
	overflow: hidden;
	width: 360px;
	height:360px;
}
.cp_navi #cp_sidenav a {
	font-size: 20px;
	position: absolute;
	left: -95px;
	width: 110px;
	height: 54px;
	padding: 12px 15px;
	transition: 0.3s;
	text-decoration: none;
	color: #ffffff;
	border-radius: 0 5px 5px 0;
}
.cp_navi #cp_sidenav a:hover {
	left: -10px;
}
.cp_navi #home {
	top: 20px;
	background-color: #da3c41;
}
.cp_navi #news {
	top: 80px;
	background-color: #1b2538;
}
.cp_navi #contact {
	top: 140px;
	background-color: #2e9b72;
}
.cp_navi #about {
	top: 200px;
	background-color: #a62e7a;
}