JSFiddle - React, Tailwind, and code Playground

HTML

<aside class="main_aside">
    <ul class="aside_menu">
        <li><a class="border" href="#">A BIG ITEM 1</a></li>
        <li><a class="border" href="#">A BIG ITEM 2</a></li>
        <li><a class="border" href="#">A BIG ITEM 3</a></li>
        <li><a class="border" href="#">A BIG ITEM 4</a></li>
    </ul>
</aside>

CSS

body{background:#000;color:#FFF;}

.main_aside{padding:1%;width:60%;/*background:none repeat scroll 0 0 rgba(0, 0, 0, 0.4);*/float:left;height:100%;margin-bottom:1%;border:1px solid;}

.aside_menu{list-style:none;margin:14px 0 0 0px;}

.aside_menu li {margin:8px 0px 0px;} 

.border{ border-bottom:2px solid transparent;text-decoration: none;display:inline-block;text-decoration:none;padding:8px 0px 0px;color:#FFF;margin-left:0px;}

.border_active{ border-bottom:2px solid #3399FF;text-decoration: none;display:inline-block;text-decoration:none;padding:8px 0px 0px;color:#FFF;text-align:right;margin-left:4%;}

JavaScript

$(document).ready(function(){    
    
    $(".border").hover(function(){
        if($(this).next('.sous_menu').is(':visible')){
            $('.sous_menu').closest('.border').removeClass('border').addClass('border_active');
        }else{
            $(this).toggleClass('border_active border', 500);
        }
    });
    
    
});