JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="mainList">
    
    <li><a href="#">Link 1</a></li>
    <li><a href="#" class="dropLink"> Link 2</a>
        
        <ul class="innerList">
            <li><a href="#">Inner link 1</a></li>
            <li><a href="#">Inner link 2</a></li>
            <li><a href="#">Inner link 3</a></li>
            <li><a href="#">Inner link 4</a></li>
            <li><a href="#">Inner link 5</a></li>
        </ul>
        
    </li>
    <li><a href="#">Link 3</a></li>
    <li><a href="#">Link 4</a></li>
    <li><a href="#">Link 5</a></li>
    
</ul>

CSS

ul{
    list-style: none;
}

li{
    float: left;
    margin-right: 10px;
}

ul li ul li{
    float: none;
    margin-bottom: 5px;
}

JavaScript

$(document).ready(function() {
    $('.innerList').hide();
    $('.dropLink').click(function(e) {
        $('.innerList').hide();
        e.stopPropagation();
        var inner = $('.innerList', $(this).parent());
        inner.fadeToggle(200);
    });
    $('*').not($('.dropLink, .innerList')).click(function(e) {
        e.stopPropagation();
        $('.innerList').hide();
    });
});