JSFiddle - React, Tailwind, and code Playground

by rohanbhangui

HTML

<nav>
    <ul>
        <li class="menuItem">
            Item 1
            <ul>
                <li>Action 1</li>
                <li>Action 2</li>
                <li>Action 3</li>
            </ul>
        </li>
        <li class="menuItem">
            Item 2
            <ul>
                <li>Action 1</li>
                <li>Action 2</li>
                <li>Action 3</li>
            </ul>
        </li>
        <li class="menuItem">
            Item 3
            <ul>
                <li>Action 1</li>
                <li>Action 2</li>
                <li>Action 3</li>
            </ul>
        </li>
    </ul>
</nav>

CSS

ul {
    list-style: none;
    padding-left: 0;
}
li {
    padding: 5px;
    cursor: pointer;
}
li.menuItem {
    float: left;
    position: relative;
}
li.menuItem > ul {
    position: absolute;
    top: 1.5em;
    left: 0;
    border: 1px solid #000;
    display: none;
}
li.menuItem li {
    white-space: nowrap;
}
li.menuItem li:hover {
    background-color: #000;
    color: #fff;
}

JavaScript

$(function () {
    $(document).on('click', 'li.menuItem', function () {
        var $this = $(this),
            menu = $this.children('ul');
        
        menu.show();
        $(document).on('click', function (e) {
            menu.hide();
            $(document).off(e);
        });
    });
});