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

jQuery.fn.hide_by_click = (function() {
            var defaults = {
                add: true,
                done: function() {
                    $(this).fadeOut()
                }

            }

            var listSelector = $(),
                tracking = function(event) {
                    listSelector.each(function(i, el) {
                        if (event.target != el && !$(el).has(event.target).length) defaults.done.call(el)
                    })
                }
            return function(options) {
                defaults = $.extend({}, defaults, options);
                $(document).off({
                    'click': tracking
                });
                this.each(function(indx, el) {
                    listSelector = listSelector[defaults.add ? 'add' : 'not'](el);
                });
                listSelector.length && $(document).on({
                    'click': tracking
                });
                return this
            }
        }())


$(document).ready(function () {
    $('.sub-menu').hide_by_click({ done: function() {
                    $(this).removeClass('open');
                }});
	$('li').click(function (event) {  
       $(this).siblings().find("ul").removeClass('open');
       $(this).children("ul").toggleClass('open'); 
       event.stopPropagation();
	});
});