JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
<li><a href="#" id="other">More</a>
     <div class="dropdown">
        <a href="#">link1</a>
        <a href="#">sublink2</a>
        <a href="#">sublink3</a>
    </div></li>
</ul>

CSS

.dropdown { display: none; position: relative; right: 5px; background: #fff; color: black; }
.dropdown a { display: block; color: black !important; text-decoration: none; padding:3px 6px;  }
.dropdown a:hover { background: #ccc; }

JavaScript

$('#other').click(function() {
    $(this).toggleClass('active');
    $(this).next('.dropdown').toggle();
    return false;
});
$('.dropdown a').click(function() {
    return false;
});
$('.dropdown').click(function (event) {
    event.stopPropagation();
    return false;
});

$(document).click(function (event) {
    if ($('.dropdown').is(':visible')) {
        $('.dropdown').toggle();
        $('#other').toggleClass('active');
    }
});