Мультилевел меню #menu

index.html

<nav>
        <ul class="topmenu">
          <li><a href="#">munu 1 levels</a>

            <ul class="submenu">
              <li><a href="#">menu 2 level</a></li>
              <li><a href="#">menu 2 level</a>

                <ul class="submenu">
                  <li><a href="#">menu 3 level</a></li>
                  <li><a href="#">menu 3 level</a></li>
                  <li><a href="#">menu 3 level</a></li>
                  <li><a href="#">menu 3 level</a></li>

                </ul>


              </li>
              <li><a href="#">menu 2 level</a>
                <ul class="submenu">
                  <li><a href="#">menu 3 level</a></li>
                  <li><a href="#">menu 3 level</a></li>
                  <li><a href="#">menu 3 level</a></li>
                  <li><a href="#">menu 3 level</a>

                    <ul class="submenu">
                      <li><a href="#">menu 4 level</a></li>
                      <li><a href="#">menu 4 level</a></li>
                      <li><a href="#">menu 4 level</a></li>
                      <li><a href="#">menu 4 level</a></li>
                      <li><a href="#">menu 4 level</a></li>
                      <li><a href="#">menu 4 level</a></li>
                      <li><a href="#">menu 4 level</a></li>

                    </ul>


                  </li>

                </ul>
              </li>
              <li><a href="#">menu 2 level</a></li>

            </ul>

          </li>
          <li><a href="#">munu 1 levels</a></li>
          <li><a href="#">munu 1 levels</a></li>
          <li><a href="#">munu 1 levels</a></li>
        </ul>

      </nav>

stuyle.css

/* код впипадающего меню
*/
.topmenu {
  display: flex;
  background-color: #3b3b3b;

  & li {
    list-style: none;

    & a {
      display: inline-block;
      padding: 10px 20px;
      text-decoration: none;
      color: #ffffff;
      width: 100%;
    }
  }
}

.submenu {
  position: absolute;
  z-index: 5;
  margin: 0;
  min-width: 200px;
  opacity: 0;
  visibility: hidden;
  transform: rotateX(-90deg);
  transform-origin: 0 0;
  transition: 0.3s linear;

  & li, .submenu .submenu li {
    position: relative;
    margin: 0;
    background-color: #eeeeee;
    ///width: 100%;
  }

  & .submenu {
    position: absolute;
    left: 100%;
    top: 0;
    margin: 0;
    transition: 0.3s linear;
  }

  & li a {
    border-bottom: 1px solid #000000;
    padding: 10px 20px;
    color: #1e1e1e;
    background-color: #eeeeee;
  }
}

.topmenu li:hover >.submenu {
  opacity: 1;
  visibility: visible;
  transform: rotate(0);
}