JSFiddle - React, Tailwind, and code Playground

HTML

<div id="sidebar" style="float:left;">
    <ul style="list-style-type:none;">
         <li class="category"><a href="#">Apparel</a>
            <ul class="submenu">
                <li><a href="#">Kids</a></li>
                <li><a href="#">Women</a></li>
                <li><a href="#">Men</a></li>  
                <li><a href="#">T-shirts</a></li> 
                <li><a href="#">Hoodies</a></li>  
                <li><a href="#">Dresses</a></li>          
            </ul>      
        </li>   
        <li class="category"><a href="#">Beachwear</a>
            <ul class="submenu">      
                <li><a href="#">Printables</a></li>      
                <li><a href="#">Summer Fashion</a></li>      
                <li><a href="#">Swimwear</a></li>      
                <li><a href="#">Sunglasses</a></li>      
                <li><a href="#">Hoodies</a></li>         
                <li><a href="#">Dresses</a></li>     
                <li><a href="#">Bikinis</a></li>     
            </ul> 
        </li>
        <li class="category"><a href="#">Accessories</a>
            <ul class="submenu">      
                <li><a href="#">Keychains</a></li>      
                <li><a href="#">Sunglasses</a></li>      
                <li><a href="#">Necklaces</a></li>      
                <li><a href="#">Bracelets</a></li>      
                <li><a href="#">Anklets</a></li>         
                <li><a href="#">Rings</a></li>     
                <li><a href="#">Jewlery</a></li>     
                <li><a href="#">Hair Accessories</a></li>     
                <li><a href="#">Personalized</a></li>     
            </ul> 
        </li>
        <li class="category"><a href="#">Surfing</a>
            <ul class="submenu">      
                <li><a href="#">Surfboards</a></li>      
                <li><a href="#">Wetsuits</a></li>      
                <li><a href="#">Boardshorts</a></li>      
                <li><a href="#">Bikinis</a></li>     ...

CSS

.category{text-decoration:none;  border:1px solid #eee; border-bottom:none; border-left:2px solid #ccc; border-right:2px solid #ccc; width:160px; padding:3px 8px 4px 20px; background-color:#fff;}
    .submenu{list-style-type:none; width:160px; position:absolute; display:none; margin-left:173px; margin-top:-18px; box-shadow:4px 4px 9px #333;}
.submenu li{padding:3px 8px 4px 10px;  border-left:1px outset #00123F; border-right:1px outset #00123F; border-top:1px solid #eee; border-bottom:none; margin-left:0px; margin-top:-5px;}
    a:visited{color:#00123F;}
    .submenu a:hover{color:#FFB500;}

JavaScript

$(document).ready(function() {
    $(".category").hover(function() {
        $(this).find(".submenu").show();
        $(this).find(".submenu li:eq(0)").css("border-top", "1px solid #00123F");
        $(this).find(".submenu li:last").css("border-bottom", "1px solid #00123F");
        $(this).find(".submenu li:first").css("border-left", "none");
        $(this).css("border-bottom", "none");
        $(this).css("width", "165px");
        $(this).css("border", "1px solid #00123F");
        $(this).css("border-top", "1px solid #00123F");
        $(this).css("border-right", "none");
    });

    $(".category:last").css("border-bottom", "2px solid #ccc");
    $(".category").mouseleave(function() {
        $(this).css("border", "1px solid #eee");
        $(this).css("border-left", "2px solid #ccc");
        $(this).css("border-right", "2px solid #ccc");
        $(this).find(".submenu").hide();
        $(this).css("background-color", "#fff");
        $(this).css("border-bottom", "none");
        $(this).css("width", "160px");
        $(".category:last").css("border-bottom", "2px solid #ccc");
    });
    $(".submenu,#sidebar").mouseleave(function() {
        $(".submenu").hide();
        $(".category").css("width", "160px");
    });
});