JSFiddle - React, Tailwind, and code Playground

by John Doe

HTML

<nav>
    <ul>
        <li><a href="#">Главная</a>

            <li class="sub"><a href="#" title="test">Товары</a>

                <ul class="sub-menu">
                    <li>Ссылка 1</li>
                    <li>Ссылка 2</li>
                    <li>Ссылка 3</li>
                </ul>
            </li>
            <li class="sub"><a href="#" title="test">блог</a>

                <ul class="sub-menu">
                    <li>Ссылка 1</li>
                    <li>Ссылка 2</li>
                    <li>Ссылка 3</li>
                </ul>
            </li>
    </ul>
</nav>

CSS

* {
    margin:0;
    padding:0;
}
.sub-menu {
    display:none;
    background:#fff;
    padding:10px 15px;
    width:100px;
}
.open {
    position:absolute;
    top:23px;
    left:0;
    display:inline-block;
}
li {
    list-style-type:none;
    text-transform: uppercase;
    margin-left:15px;
}
nav > ul >li {
    display:inline-block;
}
.sub {
    position:relative;
}
nav {
    padding:5px 20px;
    background:#333;
}
a {
    color:#fff;
}
body {
    background:#f1f1f1;
    font-family:Arial, sans-serif;
}

JavaScript

$('.sub > a').on('click', function () {
    
    $(this).next().toggleClass('open');
})

$(document).mouseup(function (e) {
    var container = $(".sub");
    if (container.has(e.target).length === 0) {
        $('.sub-menu').removeClass('open');
    }
});