JSFiddle - React, Tailwind, and code Playground

HTML

<div id="droplist">
    <ul>TOPICS
        <li class="mainli">A
            <ul class="subli">
                <li>123</li>
                <li>G123</li>
                <li>123ns</li>
            </ul>
        </li>
        <li class="mainli">B
            <ul class="subli">
                <li>123</li>
                <li>123</li>
            </ul>
        </li>
        <li class="mainli">C
            <ul class="subli">
                <li>123</li>
            </ul>
        </li>
        <li class="mainli">C
            <ul class="subli">
                <li>123</li>
            </ul>
        </li>
        <li class="mainli">d
            <ul class="subli">
                <li>123</li>
                <li>123</li>
                <li>F123r</li>
            </ul>
        </li>
        <li class="mainli">e
            <ul class="subli">
                <li>123</li>
                <li>123</li>
                <li>F13</li>
                <li>123</li>
                <li>A123</li>
                <li>123</li>
            </ul>
        </li>
        <li class="mainli">g
            <ul class="subli">
                <li>123</li>
                <li>123</li>
            </ul>
        </li>
        <li class="mainli">f
            <ul class="subli">
                <li>T123</li>
                <li>A123</li>
            </ul>
        </li>
    </ul>

CSS

#droplist {
    display:block;
    max-height:250px;
    height:250px;
    width:250px;
    background-color:grey;
    overflow: hidden;
}

#droplist .mainli:hover li {
    color:initial;
}

#droplist .mainli:hover,
#droplist .mainli li:hover {
    color:red;
}

JavaScript

$(".subli").hide();

$(".mainli").mouseenter(function (e) {
    $(this).find(".subli").slideDown();
});

$(".mainli").mouseleave(function (e) {
    $(this).find(".subli").slideUp();
});