JSFiddle - React, Tailwind, and code Playground

HTML

<nav><div class="menuBox"><div><ul><li class="first" id="list_1"><a href="/"><span><span><span>Главная</span></span></span></a></li><li id="list_2"><a href="/agros/"><span><span><span>О компании</span></span></span></a></li><li class="active" id="list_3"><strong><span><span><span>Партнеры</span></span></span></strong></li><li id="list_4"><a href="#"><span><span><span>Каталог товаров</span></span></span></a><div class="s0"><div class="s0-1"></div><div class="s1"><div class="s1-1"></div><div class="s1-2"></div></div><div class="s2"><div class="s3"><ul data-submenu="true"><li class="first" id="list_6"><a href="/katalog/"><span><span><span>Каталог техники</span></span></span></a><div class="s0"><div class="s0-1"></div><div class="s1"><div class="s1-1"></div><div class="s1-2"></div></div><div class="s2"><div class="s3"><ul data-submenu="true"><li class="first last" id="list_11"><a href="/katalog/sredstva-maloi-mehanizacii/"><span><span><span>Средства малой механизации</span></span></span></a></li><!-- 1 --></ul></div></div><div class="s4"><div class="s4-1"></div><div class="s4-2"></div></div></div></li><li id="list_7"><a href="/sklad/"><span><span><span>Техника БУ</span></span></span></a></li><li id="list_8"><a href="/zapchasti/"><span><span><span>Склад запчастей</span></span></span></a></li><li class="last" id="list_10"><a href="/sh-produktsiya/"><span><span><span>СХ продукция</span></span></span></a></li><!-- 1 --></ul></div></div><div class="s4"><div class="s4-1"></div><div class="s4-2"></div></div></div></li><li id="list_5"><a href="/adres/"><span><span><span>Контактная информация</span></span></span></a></li><li class="last" id="list_9"><a href="/sh-produktsiya/"><span><span><span>СХ продукция</span></span></span></a></li></ul></div></div>
</nav>

CSS

.s0 {
display:none;
}
li ul{
    margin-left:20px;
}

JavaScript

$('nav li#list_4 > a').click(function(){
        if ($('> .s0', $(this).parents('li')).css('display')=='block') {
            $('> .s0', $(this).parents('li')).fadeOut(200);
        }
        else {
            $('> .s0', $(this).parents('li')).fadeIn(200);
        };
        return false;
    });

$('nav li#list_4 .s0 a').hover(showBubble, hideBubble);
    $('nav li#list_4 .s0 .s0').hover(function(){
        console.log('mouseenter');
        $(this).attr('style', 'border: 1px solid red; display:block;');
        $('nav li#list_4 .s0 a').unbind('mouseenter mouseleave');
    });


function showBubble(o){
    $('> .s0', $(o['currentTarget']).parents('li').get(0)).fadeIn(200);
};
function hideBubble(o){
    $('> .s0', $(o['currentTarget']).parents('li').get(0)).delay(1000).fadeOut(200);
};