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;
    border-left: 6px solid #333;
}

#menu li {
    border-right: 6px solid #119952;
    padding: 10px;
    background: #333;
    color: #fff;
    float: left;
    clear: both;
}

JavaScript

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

}); // Each loppuu