サンプル

See the Pen Codepen by Tora (@webtoranomaki) on CodePen.

コード


<ul>
	<li class="menu-item"><a href="">menu</a></li>
	<li class="menu-item"><a href="">menu</a></li>
	<li class="menu-item"><a href="">menu</a></li>
	<li class="menu-item"><a href="">menu</a></li>
	<li class="menu-item"><a href="">menu</a></li>
</ul>

.menu-item {
	position: relative;
	left: -100px;
	width: 300px;
	-webkit-transition: .3s;
	transition: .3s;
}
.menu-item a {
	display: block;
	padding: 2px 10px;
	text-align: right;
	color: #fff;
	border: 1px solid #069;
	background-color: #069;
	-webkit-transition: .3s;
	transition: .3s;
}
.menu-item:hover {
	left: -20px;
}
.menu-item:hover a {
	color: #069;
	background-color: #fff;
}