JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="cont">
     <li class="w1"><a href="#">Домой</a></li><!----------------------->
     <li class="w1"><a href="#">О нас +</a><!----------------------->
         <ul class="q1 fir"><li><a href="#">Наша история</a></li>
             <li><a href="#">Как нас найти</a></li>
             <li><a href="#">Час работы</a></li>
         </ul></li><!----------------------->
     <li class="w1"><a href="#">Наши товары +</a>
         <ul class="q1">
            <li class="w2"><a href="#">+ Штуковины</a>
                <ul class="q2">
                <li><a href="#">Простая штуковина</a></li>
                <li><a href="#">Стандартная штуковина</a></li>
                <li><a href="#">Продвинутая штуковина</a></li>
                </ul></li>
            <li class="w2"><a href="#">+ Гаджеты</a>
                <ul class="q2">
                <li><a href="#">Простой гаджет</a></li>
                <li><a href="#">Стандартный гаджет</a></li>
                <li class="w3"><a href="#">+ Продвинутый гаджет</a>
                    <ul class="q3">
                     <li><a href="#">Продвинутый гаджет A</a></li>
                     <li><a href="#">Продвинутый гаджет Б</a></li>   
                    </ul></li>
                </ul></li>
            <li><a href="#">Машини времени</a></li> 
         </ul></li>
 </ul>

CSS

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.cont{
    font-size: 0;
    border: 1px black solid;
}
a{
    text-decoration: none;
    line-height: 40px;
    padding: 0 20px;
}
.q1{
    position: absolute;
    border: 1px black solid;
    width: 165px;
    display: none;
}
.q1 li{
    border-top: 1px gray solid;
    display: block;
}
.w1{
    font-size: 16px;
    border-left: 1px black solid;
    display: inline-block;
    position: relative;
}
.w2{
    position: relative;
}
.w3{
    position: relative;
}
.q2, .q3{
    top: 0;
    left: 100%;
    position: absolute;
    border: 1px black solid;
    width: 210px;
    display: none;
}
li:hover{
    background: red;
}

.red {
    background: red;
}

JavaScript

$(document).ready(function(){
 
    $('.w1').hover(
        function(){
        $(this).addClass('red');
        $(this).find('.q1').stop(true, true).delay(500).slideDown();
    },
    function(){
    		$(this).delay(1000).queue(
          function(next){ 
            $(this).removeClass('red');
            next();
          }); 
        $(this).find('.q1').stop(true, true).delay(500).slideUp();
    });
});