JSFiddle - React, Tailwind, and code Playground

by Axiniya

HTML

<nav>
  <div class="main-menu">
    <ul class="menu-main-menu">
      <li class="menu-parent-item">
        <a href="#">Пункт меню 1 ▶</a>
        <div class="menu-lvl-2">
          <ul class="lvl-2">
            <li class="menu-child-item">
              <a href="#">Подпункт меню 1 ▶</a>
              <div class="menu-lvl-3">
                <ul class="lvl-3">
                  <li><a href="#">Подподпункт меню 1</a></li>
                  <li><a href="#">Подподпункт меню 2</a></li>
                  <li><a href="#">Подподпункт меню 3</a></li>
                </ul>
              </div>
            </li>
            <li><a href="#">Подпункт 2</a></li>
            <li><a href="#">Подпункт 3</a></li>
          </ul>
        </div>
      </li>
      <li  class="menu-parent-item">
      <a href="#">Пункт меню 2 ▶</a>
        <div class="menu-lvl-2">
          <ul class="lvl-2">
            <li class="menu-child-item">
              <a href="#">Какой-то контент 1 ▶</a>
              <div class="menu-lvl-3">
                <ul class="lvl-3">
                  <li><a href="#">Вложеность 1</a></li>
                  <li><a href="#">Вложеность 2</a></li>
                  <li><a href="#">Вложеность 3</a></li>
                </ul>
              </div>
            </li>
            <li><a href="#">Какой-то контент 2</a></li>
            <li><a href="#">Какой-то контент 3</a></li>
          </ul>
        </div>
      </li>
      <li><a href="#">Пункт меню 3</a></li>
    </ul>
  </div>
</nav>

CSS

.main-menu li, a {
  text-decoration: none;
  list-style: none;
  color: black;
}

.main-menu .menu-main-menu {
    position: fixed;
    width: 200px;
    top: 0;
    height: 100%;
    background: gray;
    margin: 0;
    padding: 0;
}

.menu-lvl-2 .lvl-2 {
    display: none;
    position: fixed;
    width: 200px;
    left: 200px;
    top: 0;
    list-style: none;
    height: 100%;
    background: darkgray;
    padding: 0;
}

.menu-lvl-3 .lvl-3 {
    display: none;
    position: fixed;
    width: 200px;
    left: 400px;
    top: 0;
    list-style: none;
    height: 100%;
    background: lightgray;
    padding: 0;
}

.menu-parent-item:hover > .menu-lvl-2 .lvl-2 {
    display: block;
}

.lvl-2 .menu-child-item:hover > .menu-lvl-3 .lvl-3 {
    display: block;
}