CSS/左固定onマウスで伸びるリンク

	
ul {
	position: fixed;
	left: -40px;
	top: 30%;
	list-style: none;
}
li {
	width: 80px;
	height: 50px;
	transition: 0.5s;
	text-align: right;
}
li:first-child {
	background: rgba(100,200,0,0.5);
}
li:nth-child(2) {
	background: rgba(200,100,0,0.5);
}
li:last-child {
	background: rgba(0,250,100,0.5);
}
li:hover {
	width: 160px;
	transition: 0.5s;
}