JSFiddle - React, Tailwind, and code Playground

by robx

HTML

<div id="menu">
    <ul>
        <li>Item 1<div class="bar"></div><div class="js"></div></li>
        <li>Item 2<div class="bar"></div><div class="js"></div></li>
        <li>Item 3<div class="bar"></div><div class="js"></div></li>
        <li>Item 4<div class="bar"></div><div class="js"></div></li>
        <li>Item 5<div class="bar"></div><div class="js"></div></li>
    </ul>
</div>

CSS

#menu{
    position:relative;
    background-color:#ccc;
    padding:5px; 
}
.bar{
    position:relative;
    height:2px;
    z-index:1;
    background-color:#fff;   
}
.js{
    position:absolute;
    width:100%;
    z-index:2;
    bottom:0;
    left:0;
    height:2px;
 background-color:#F00;   
}
#menu li:hover .js{
    background-color:#000;
}
#menu li:hover .bar{
    position:relative;
    background-color:#000;
}
li{
    position:relative;
    background-color:#ccc;
    display:inline-block;
    cursor:pointer; 
}

JavaScript

$('#menu li').hover(function() {
    $(this).find('.js').stop(true, true).animate({
        width: 'toggle'
    },500);
});