<div class="wrapper">
  <ul>
    <li class=""><div class="lvl0 inner">BIG BAD SHOP1</div></li>
    <li class=""><div class="lvl0 inner">SHOP11</div></li>
    <li class=""><div class="lvl0 inner">SHOP111</div></li>
    <li class=""><div class="lvl0 inner">SHOP1111</div></li>
    <li class=""><div class="lvl0 inner">PINK</div></li>
    <li class=""><div class="lvl0 inner">SHOP111111</div></li>
    <li class=""><div class="lvl0 inner">SHOP1111111</div></li>
    <div id="lvl0out" class="hidden">
      
      <div class="separator-hr"></div>
    </div>
  </ul>
  <ul class="hidden">
    <div id="lvl1in" class="hidden">
      <div class="separator-hr"></div>
    </div>
    <div id="lvl1mid" class="hidden">
      <div class="separator-vert"></div>
    </div>
    <li class=""><div class="lvl1 inner">SHOP1</div></li>
    <li class=""><div class="lvl1 inner">SHOP11</div></li>
    <li class=""><div class="lvl1 inner">SHOP111</div></li>
    <li class=""><div class="lvl1 inner">SHOP1111</div></li>
    <li class=""><div class="lvl1 inner">SHOP11111</div></li>
    <li class=""><div class="lvl1 inner">SHOP111111</div></li>
    <li class=""><div class="lvl1 inner">SHOP1111111</div></li>
    <button onclick="closeMenu2()">X</button>
  </ul>
  <ul class="hidden">
    <li>SHOP1</li>
    <li>SHOP11</li>
    <li>SHOP111</li>
    <li>SHOP1111</li>
  </ul>
</div>

body::before {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-image: url(https://images.unsplash.com/photo-1592819005124-1401b90865dd?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ);
    background-size: 100% 100%;
    opacity: .3;
    content: "";
    z-index: -1;
}
.wrapper {
  display: flex;
  font-size: 20px;
  font-weight: 500;
  font-family: sans-serif;
  color: blue; 
}
ul {
  margin: 0 30px;
  box-sizing: border-box;
  width: 250px;
/*   border-right: 1px solid gray; */
  position: relative;
}
li {
  margin: 5px 0;
  box-sizing: border-box;
  display: flex;
  position: relative;
  cursor: auto;
}
li:hover {
  color: red;
}
.inner {
  white-space: nowrap;
}
.orange {
  color: orange;
}
#lvl0out, #lvl1in {
  display: block;
  margin-top: 9px;
  width: 100%;
}
#lvl1in {
  position: absolute;
  width: 100px;
  left: -100px;
}
#lvl1mid {
  position: absolute;
  left: -62px;
}
.lvl0, .lvl1 {
  width: auto;
  cursor: pointer;
}
.separator-hr{
  height: 0;
  width: 100%;
  border-top: 3px dashed black;
}
.separator-vert {
  width: 0;
  height: 100%;
  border-left: 3px dashed black;
}

.hidden {
  display: none !important;
}



button {
  position: absolute;
  top: 0px;
  right: -30px;
  color: white;
  background-color: darkred;
  border: 1px solid red;
  padding: 5px;
}
button:hover {
  background-color: red;
}

let lvl0 = Array.from(document.getElementsByClassName('lvl0'))
let lvl0out = document.getElementById('lvl0out')
let menu2 = document.getElementsByTagName('ul')[1]

lvl0.forEach( el => el.addEventListener("click", e => {
  lvl0.forEach(el => el.classList.remove('orange'))
  e.target.classList.add('orange')
  menu2.classList.remove('hidden')
  
  el.parentElement.appendChild(lvl0out)
  setMidDimensions()
}))

let lvl1 = Array.from(document.getElementsByClassName('lvl1'))
let lvl1in = document.getElementById('lvl1in')
let lvl1mid = document.getElementById('lvl1mid')
let lvl1midtop = 0;
let lvl1Bottom = 100;


lvl1.forEach( el => el.addEventListener("mouseover", e => {
  lvl1.forEach(el => el.classList.remove('orange'))
  e.target.classList.add('orange')
  lvl1in.classList.remove('hidden')
  lvl0out.classList.remove('hidden')
  lvl1mid.classList.remove('hidden')
  el.parentElement.prepend(lvl1in)
  
  setMidDimensions()
  
}))

let setMidDimensions = () => {
  let lvl1intop = lvl1in.getBoundingClientRect().top - 5
  let lvl0outtop = lvl0out.getBoundingClientRect().top - 5
  let min = Math.min(lvl1intop, lvl0outtop)
  let max = Math.max(lvl1intop, lvl0outtop)
  lvl1mid.style.top = min + 'px'
  lvl1mid.style.height = max - min + 'px'
}

let closeMenu2 = () => {
  lvl1.forEach(el => el.classList.remove('orange'))
  menu2.classList.add('hidden')
  lvl1in.classList.add('hidden')
  lvl0out.classList.add('hidden')
  lvl1mid.classList.add('hidden')
}