JSFiddle - React, Tailwind, and code Playground

by vlit

HTML

<div class="nav">
  <ul class="dropdown">
    <li class="sub"><a href="/" title="">Продукция <i class="icon-arb"></i></a>
      <ul>
        <li class="sub1">
          <a href="/katalog-tovarov/acetaty/">Ацетаты</a>
          <ul>
            <li class="">
              <a href="/katalog-tovarov/acetaty/metil/">Метил</a>

            </li>

            <li class="">
              <a href="/katalog-tovarov/acetaty/izobutil/">Изобутил</a>

            </li>

            <li class="">
              <a href="/katalog-tovarov/acetaty/butil/">Бутил</a>

            </li>
          </ul>
        </li>

        <li class="sub1">
          <a href="/katalog-tovarov/kremniy/" class="current">Кремний</a>
          <ul class="current">
            <li class="">
              <a href="/katalog-tovarov/kremniy/dioksid-kremniya/">Диоксид кремния</a>

            </li>
          </ul>
        </li>

        <li class="sub1">
          <a href="/katalog-tovarov/soda/">Сода</a>
          <ul>
            <li class="">
              <a href="/katalog-tovarov/soda/kausticheskaya-soda/">Каустическая сода</a>

            </li>
          </ul>
        </li>

        <li class="sub1">
          <a href="/katalog-tovarov/bariy/">Барий</a>
          <ul>
            <li class="">
              <a href="/katalog-tovarov/bariy/barit/">Барит</a>

            </li>
          </ul>
        </li>
      </ul>
    </li>

    <li><a href="/o-kompanii/" title="О компании">О компании</a></li>
    <li><a href="/news/" title="">Новости</a></li>
  </ul>
</div>

CSS

.nav {
  z-index: 9999;
  line-height: 45px;
  width: 70%;
  margin-left: 45px;
}
.nav li,
.nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.icon-menu {
  display: none;
}
.dropdown {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  width: 100%;
  position: relative;
}
.dropdown li {
  flex-grow: 1;
  text-transform: uppercase;
}
.dropdown li a,
.dropdown li span {
  display: block;
  cursor: pointer;
  text-align: center;
  border-right: 1px solid #f0efef;
}
.dropdown li a {
  color: #000;
  font-weight: 600;
}
.dropdown li a:hover {
  color: #970303;
}
.dropdown ul a,
.dropdown ul span {
  padding: 10px 10px;
  text-align: left;
}
.dropdown li.hover,
.dropdown li:hover {
  position: relative;
  cursor: pointer
}
.dropdown ul {
  display: none;
  background: #F2F2F2;
  position: absolute;
  z-index: 9999;
  width: 280px;
  top: 100%;
  left: -1px;
  -webkit-box-shadow: 0px 35px 20px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 35px 20px 0px rgba(0, 0, 0, 0.2);
}
/* убираем тени в подменю */
.dropdown ul ul,
.dropdown ul ul ul {
  -webkit-box-shadow: none;
  box-shadow: none;
}

/* всплывает подменю, а меню выделяется */
.dropdown li.sub:hover,
.dropdown li.sub:focus-within {
  background: #F2F2F2;
  color: #fff;
}

.dropdown li:hover>ul {
  display: block;
}
.dropdown ul li {
  font-weight: 400;
  position: relative;
  line-height: 15px;
  text-transform: none;
  border-bottom: 1px solid #E2E1E1;
}
.dropdown ul li:last-child {
  border-bottom: none;
}
.dropdown li.sub ul li a {
  font-weight: 400;
  padding: 12px 20px 12px 20px;
  border-right: none;
}
.dropdown li.sub ul li a:hover {
  background: #e4e4e4;
}
.dropdown ul ul{
  overflow: hidden;
  max-height: 0;
  width: auto;
  display: block;
  position: static;
}
.dropdown ul ul.current {
 display: block;
 max-height: 100em
}
.dropdown li.sub1 ul li {
  border: none;
}

.dropdown li.sub1 ul li a {
  background: #e4e4e4;
  border-bottom: 1px solid #d3d3d3;
  padding-left:...

JavaScript

$(function () {
  $(".nav").prepend('<i class="icon-menu"></i>'), $(".icon-menu").click(function () { 
    $(".dropdown").toggleClass("arrtm alm");
    $(".nav ul.dropdown").slideToggle(600), $(this).toggleClass("active");
  });
  $(".sub > a").hover(function (e) {
    e.preventDefault();
    $(this).toggleClass("current").next("ul").toggleClass("current");
  });
  $(".sub1 > a").click(function (e) {
    e.preventDefault();
    $(this).toggleClass("current").next("ul").toggleClass("current");
  });
});