JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li class="collections"><a href="index.php?page=collections&lg=">COLLECTIONS</a>
        <div id="ssmenu">
            <ul class="ssmenu">                                
                <li>COLLECTION 1</li> 
                <li>COLLECTION 2</li>
                <li>COLLECTION 3</li>
                <li>COLLECTION 4</li>
                <li>COLLECTION 5</li>
            </ul>
        </div>
    </li>
</ul>

CSS

#ssmenu{
        position: absolute;
        top: 22px;
        left: -9px;
        z-index:100;
    }
    
    .ssmenu{
        
        width:100%;
        height:100%;
        background-color:#DFA;
        z-index:100;
    }
    
    .ssmenu li{
        background-color: black;
        display: block;
        float: none !important;
        width: 100px;
        padding-left: 4px;
        padding-top: 2px;
        padding-bottom: 2px;    
        display:none;
    color:#fff;
    width:200px;
    }

JavaScript

$('.ssmenu').hover(function () {
    $('.ssmenu li').fadeIn();        
},
function () {
    $('.ssmenu li').fadeOut();        
});    


$('.collections').bind('mouseover', function () {
    $('.ssmenu li').fadeIn();
});