JSFiddle - React, Tailwind, and code Playground

by Alexey Demin

HTML

<nav class="menu__body">
  <ul class="menu__list">
    <li>
      <a href="" class="menu__link">Раздел 1</a>
      <button class="menu__arrow"><i class="fas fa-angle-down"></i></button>
      <ul class="menu__sub-list">
        <li>
          <a href="" class="menu__sub-link">Под Раздел 1</a>
        </li>
        <li>
          <a href="" class="menu__sub-link">Под Раздел 2</a>
          <button class="menu__arrow"><i class="fas fa-angle-right"></i></button>
          <ul class="menu__sub-sub-list">
            <li>
              <a href="" class="menu__sub-sub-link">Под под раздел 1</a>
            </li>
            <li>
              <a href="" class="menu__sub-sub-link">Под под раздел 2</a>
            </li>
            <li>
              <a href="" class="menu__sub-sub-link">Под под раздел 3</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="" class="menu__sub-link">Под Раздел 3</a>
        </li>
      </ul>
    </li>
    <li><a href="" class="menu__link">Раздел 2</a></li>
    <li><a href="" class="menu__link">Раздел 3</a></li>
    <li><a href="" class="menu__link">Раздел 4</a></li>
    <li><a href="" class="menu__link">Раздел 5</a></li>
    <li><a href="" class="menu__link">Раздел 6</a></li>
  </ul>
</nav>

CSS

.menu__list {}

.menu__list>li {
  position: relative;
  margin: 0px 0px 0px 20px;
}

.menu__link {
  color: #fff;
  font-size: 18px;
}

.menu__link:hover {
  text-decoration: underline;
}

.menu__sub-list {
  position: absolute;
  top: 100%;
  right: 0;
  background-color: #000;
  padding: 15px;
  min-width: 10.6rem;
}

.menu__sub-list li {
  margin: 0px 0px 10px 0px;
  display: flex;
  align-items: center;
  position: relative;
}

.menu__sub-list li:last-child {
  margin: 0;
}

.menu__sub-link {
  color: #fff;
}

.menu__sub-link:hover {
  text-decoration: underline;
}

.menu__arrow {
  display: none;
}

.menu__sub-sub-list {
  position: absolute;
  top: 0;
  left: 100%;
  padding: 0px 1.1rem;
}

.menu__sub-sub-list>li {
  background-color: #fff;
  margin: 0;
  padding: 0.5rem 0px;
}

.menu__sub-sub-link {
  color: #000;
}

/*---------------------PC---------------------*/

body._pc .menu__list>li:hover .menu__sub-list {
  opacity: 1;
  visibility: visible;
  transform: translate(0px, 0px);
  pointer-events: all;
}

body._pc .menu__sub-list>li:hover .menu__sub-sub-list {
  opacity: 1;
  visibility: visible;
  transform: translate(0px, 0px);
  pointer-events: all;
}

/*---------------------PC---------------------*/

/*---------------------TOUCH---------------------*/

body._touch .menu__list>li {
  display: flex;
  align-items: center;
}

body._touch .menu__link {
  flex: 1 1 auto;
}

body._touch .menu__arrow {
  display: flex;
  /* width: 0; */
  /* height: 0; */
  margin: 0px 0px 0px 5px;
  transition: transform 0.3s ease 0s;
  background-color: #ffffff00;
  border: 1px solid #fcf9f9;
  text-align: center;
  padding: 0px 0.3rem;
  font-size: 1.3rem;
}

body._touch .menu__list>li._active .menu__sub-list {
  opacity: 1;
  visibility: visible;
  transform: translate(0px, 0px);
  pointer-events: all;
}

body._touch .menu__list>li._active .fa-angle-down {
  transform: rotate(-180deg);
  transition: transform 0.3s ease 0s;
  color: #1b1a1a;
}

body._touch...

JavaScript

if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|Opera Mini/i.test(navigator.userAgent)) {
  document.body.classList.add('_touch');
  let menuArrows = document.querySelectorAll('.menu__arrow');
  if (menuArrows.length > 0) {
    for (var i = 0; i < menuArrows.length; i++) {
      const menuArrow = menuArrows[i];
      menuArrow.addEventListener("click", function(e) {
        menuArrow.parentElement.classList.toggle('_active');
      });
    }
  }
} else {
  document.body.classList.add('_pc');
}