<ul class="cp_sidebarmenu">
<li><a href="#"><i class="fa fa-home"></i><span>Menu1</span></a>
	<ul>
		<li><a href="#"><i class="fa fa-calendar"></i><span>menu1-1</span></a></li>
		<li><a href="#"><i class="fa fa-calendar-check-o"></i><span>menu1-2</span></a></li>
	</ul>
</li>

<li><a href="#"><i class="fa fa-file-text"></i><span>Menu2</span></a>
	<ul>
		<li><a href="#"><i class="fa fa-file-image-o"></i><span>menu2-1</span></a></li>
		<li><a href="#"><i class="fa fa-file-video-o"></i><span>menu2-2</span></a></li>
		<li><a href="#"><i class="fa fa-file-audio-o"></i><span>menu2-3</span></a></li>
	</ul>
</li>

<li><a href="#"><i class="fa fa-comment"></i><span>Menu3</span></a>
	<ul>
		<li><a href="#"><i class="fa fa-commenting"></i><span>menu3-1</span></a></li>
		<li><a href="#"><i class="fa fa-comments"></i><span>menu3-2</span></a></li>
	</ul>
</li>

<li><a href="#"><i class="fa fa-share-alt"></i><span>Menu4</span></a>
	<ul>
		<li><a href="#"><i class="fa fa-facebook"></i><span>menu4-1</span></a></li>
		<li><a href="#"><i class="fa fa-twitter"></i><span>menu4-2</span></a></li>
		<li><a href="#"><i class="fa fa-google-plus"></i><span>menu4-3</span></a></li>
	</ul>
</li>
</ul>

.cp_sidebarmenu {
	font-size: 0;
	position: absolute;
	z-index: 10;
	top: 0;
	left: 0;
	height: 100%;
	padding: 0.4em 0;
	text-align: center;
	color: white;
	background: #37474f;
}
.cp_sidebarmenu li {
	line-height: 100%;
	position: relative;
	display: inline-block;
	list-style: none;
	-webkit-transform: translateZ(0);
					transform: translateZ(0);
	vertical-align: middle;
	pointer-events: none;
}
.cp_sidebarmenu a {
	font-size: 16px;
	line-height: 100%;
	position: relative;
	display: block;
	min-width: 5em;
	margin-bottom: 0.4em;
	padding: 0.4em;
	-webkit-transition: background 0.3s;
					transition: background 0.3s;
	text-decoration: none;
	pointer-events: auto;
	color: #ffffff;
}
.cp_sidebarmenu a:active,
.cp_sidebarmenu a:focus {
	background: #0097a7;
}
.cp_sidebarmenu i {
	font-size: 2em;
	display: block;
	margin-bottom: 0.2em;
}
.cp_sidebarmenu span {
	font-size: 0.625em;
}
.cp_sidebarmenu li:hover ul {
	-webkit-transform: translateX(0);
					transform: translateX(0);
	background: #0097a7;
}
.cp_sidebarmenu > li {
	display: block;
}
.cp_sidebarmenu > li > a {
	background: #37474f;
}
.cp_sidebarmenu > li:hover {
	z-index: 100;
}
.cp_sidebarmenu > li:hover a {
	background: #0097a7;
}
.cp_sidebarmenu > li a:hover {
	background: #00acc1;
}
.cp_sidebarmenu > li:hover a:after {
	opacity: 1;
}
.cp_sidebarmenu > li ul {
	position: absolute;
	z-index: -1;
	top: 0;
	left: 100%;
	width: auto;
	height: 100%;
	-webkit-transition: 0.5s -webkit-transform;
					transition: 0.5s -webkit-transform;
					transition: 0.5s transform;
					transition: 0.5s transform, 0.5s -webkit-transform;
	-webkit-transform: translateX(-100%);
					transform: translateX(-100%);
	white-space: nowrap;
	background: #0097a7;
	padding: 0;
}