JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://yui.yahooapis.com/3.10.3/build/cssreset/cssreset-min.css">
<ul>
	<li><a href="#">メニュー1</a></li>
	<li><a href="#">メニュー2</a></li>
	<li><a href="#">メニュー3</a></li>
	<li><a href="#">メニュー4</a></li>
	<li><a href="#">メニュー5</a></li>
</ul>

CSS

li {
    margin-bottom: 1px;
    width: 200px;
}
li a {
    display: block;
    padding: 8px;
    background: orange;
    color: #fff;
    text-decoration: none;
   -webkit-transition-timing-function: ease;	
	-moz-transition-timing-function: ease;	
	-o-transition-timing-function: ease;	
	transition-timing-function: ease;	
}
li a:hover {
    background: purple;
}