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:212px;
    width:250px;
    background-color:grey;
    overflow:auto;
}

#droplist > ul > li:hover {
    color:red;
}

#droplist li ul {
    color:#000;
}

JavaScript

$(".subli").hide();
$(".mainli").on("click", function (e) {
    e.preventDefault();
    $(this).find(".subli").slideToggle();

});