JSFiddle - React, Tailwind, and code Playground
HTML
<ul id="nav-menu">
<li><a href="#">Hello</a></li>
</ul>
CSS
#nav-menu li a
{
background: green;
background-repeat:repeat-x;
background-position: left top;
height: 35px;
}
#nav-menu li a:hover
{
background: red;
background-repeat:repeat-x;
background-position: left top;
height: 35px;
}
JavaScript
$(document).ready(function () {
//When mouse rolls over
$("#nav-menu li").hover(function () {
$(this).filter(':not(:animated)').animate({
marginLeft: '9px'
}, 'slow');
},
function () {
$(this).animate({
marginLeft: '0px'
}, 'slow');
});
});