JSFiddle - React, Tailwind, and code Playground

HTML

<div id="navigation-main">
    <ul class="sf-menu-main">
        <li class="clickable">Menu
            <ul class="sf-menu-sub">
                <li> <a class="login-head-font" href="">Home</a>

                </li>
                <li> <a class="login-head-font" href="">Events</a>

                </li>
            </ul>
        </li>
    </ul>
</div>

CSS

.clickable {
    cursor: default;
}
#navigation-main {
    width:65px;
    margin-left:10px;
}
#navigation-main .sf-menu-main li ul {
    display: none;
}
#navigation-main .sf-menu-main li li {
    background:#e73420;
    border-top:1px solid rgba(0, 0, 0, 0.1);
    width:235px;
    clear:both;
    padding:5px 0 5px 15px;
}
#navigation-main .sf-menu-main li li a {
    width:250px;
    padding:5px 10px 5px 15px;
}

JavaScript

$(function () {
    var sf_menu_sub = $('.sf-menu-sub');
    $('.clickable').on('click', function (e) {
        e.stopPropagation();
        sf_menu_sub.toggle();
    });
    $(document).on('click', function (e) {
        sf_menu_sub.hide();
    });
});