JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<ul id="menu">
    <li>Lorem</li>
    <li>Ipsum</li>
    <li>Dolor</li>
    <li>Sit</li>
    <li>Amet</li>
</ul>

CSS

#menu {
    float: left;
}

#menu li {
    padding: 10px;
    background: #333;
    color: #fff;
    float: left;
    clear: both;
}

JavaScript

$("#menu li").each(function(){
    
    $(this).hover(function () {
        
        $(this).stop(true,true).animate({
            paddingLeft: '+=7' }, {
            duration: 300
        });
        
      }, function () {
          
        $(this).stop(true,true).animate({
            paddingLeft: '-=7' }, {
            duration: 300
        });
          
      }
    ); // Hover loppuu

}); // Each loppuu