Problems with overflow inside the navbar

Question

I created a navbar that has a dropdown menu with multiple menus. Passing the mouse in one of the menus, is to appear another submenu, when passing the mouse in each submenu, is to appear more content.

As there are many submenus and much content, I wanted there to be a bar with overflow: scroll, however, as the content is inside the submenus, the content is "hidden", I created an illustration of what happens and what I want to happen to facilitate life.

If there is a solution only with css would be good, but javascript is welcome.

https://i.stack.Imgur.com/6hdJV.png

nav > ul {
  display: flex;
  list-style: none;
}
nav > ul > li {
  padding: 0 10px 0 0;
}
.menu-item {
  cursor: pointer;
}
.menu-item:hover {
  background-color: red;
}
.submenu {
  display: none;
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: #ab7c7c;
  cursor: pointer;
}
.submenu > li:hover {
  background-color: brown;
}
.content {
  display:none;
  position: absolute;
  width: 100%;
  left: 100%;
  background-color: grey;

}
.menu-item:hover .submenu, .submenu:hover .content, .submenu:hover {
  display: block;
}

<nav>
  <ul class="menu">
    <li class="menu-item">
      <span>Menu</span>
      <ul class="submenu">
        <li>
          <span>Submenu1</span>
          <div class="content">
            <ul>
              <li>Content</li>
              <li>Content</li>
              <li>Content</li>
              <li>Content</li>
              <li>Content</li>
              <li>Content</li>
              <li>Content</li>
              <li>Content</li
            </ul>
          </div>  
        </li>
        <li>
          <span>Submenu2</pan>
        </li>
        <li>
          <span>Submenu3</pan>
        </li>
        <li>
          <span>Submenu4</pan>
        </li>
        <li>
          <span>Submenu5</pan>
        </li>
        <li>
          <span>Submenu6</pan>
        </li>
      </ul>  
    </li>  
    <li>
       <span>Projects</span>
    </li>
    <li>
       <span>Contact</span>
    </li>  
  </ul> 
</nav>