JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menu">
            <table>
                <tr><td class="item"><a href="#">Menu Item 1</a></td></tr>
                <tr><td class="item"><a href="#">Menu Item 2</a></td></tr>
            </table>
        </div>

CSS

#menu {position: absolute;left: 0px;padding: 0px 20px 0px 0px;}
#menu td {background: #8B0B04;padding: 5px 30px 5px 0px}
#menu a {color: #A9A582;text-decoration: none;font: 17px bold Helvetica}

JavaScript

$(document).ready(function(){
    $('.item').hover(function(){
        $($this).stop().animate({paddingLeft: '20px'}, "slow");
    }, function(){
        $($this).stop().animate({paddingLeft: '0px'}, "slow");
    });
});