<nav>
<ul class="menu">
  <li class="menu__item">
    <span>Thing 1</span>
    <ul class="sub-menu">
      <li class="sub-menu__item">Subthing 1</li>
      <li class="sub-menu__item">Subthing 2</li>
      <li class="sub-menu__item">Subthing 3</li>
      <li class="sub-menu__item">Subthing 4</li>
    </ul>
  </li>
  <li class="menu__item">
    <span>Thing 2</span>
    <ul class="sub-menu">
      <li class="sub-menu__item">Subthing 1</li>
      <li class="sub-menu__item">Subthing 2</li>
      <li class="sub-menu__item">Subthing 3</li>
      <li class="sub-menu__item">Subthing 4</li>
    </ul>
  </li>
  <li class="menu__item">
    <span>Thing 3</span>
    <ul class="sub-menu">
      <li class="sub-menu__item">Subthing 1</li>
      <li class="sub-menu__item">Subthing 2</li>
      <li class="sub-menu__item">Subthing 3</li>
      <li class="sub-menu__item">Subthing 4</li>
    </ul>
  </li>
  <li class="menu__item">
    <span>Thing 4</span>
    <ul class="sub-menu">
      <li class="sub-menu__item">Subthing 1</li>
      <li class="sub-menu__item">Subthing 2</li>
      <li class="sub-menu__item">Subthing 3</li>
      <li class="sub-menu__item">Subthing 4</li>
    </ul>
  </li>
  <li class="menu__item">
    <span>Thing </span>
    <ul class="sub-menu">
      <li class="sub-menu__item">Subthing 1</li>
      <li class="sub-menu__item">Subthing 2</li>
      <li class="sub-menu__item">Subthing 3</li>
      <li class="sub-menu__item">Subthing 4</li>
    </ul>
  </li>
</ul>
</nav>

<input type="checkbox" id="toggleConeVisibility" />
<label for="toggleConeVisibility">Toggle cone visibility</label>

body {
  font-size: 18px;
  font-family: 'avenir', 'helvetica', sans-serif;
}

.menu {
  padding: 0;
  display: inline-block;
  list-style: none;
  background: orange;
}

.menu__item {
  position: relative;
  padding: 1.5em 2.5em;
  cursor: pointer;
  
  &:hover {
    background: cadetblue;
    
    &:after {
      content: '';
      display: block;
      position: absolute; 
      width:150px;
      height: 200px;
  top: 50%;
      left: 75%;
      transform: rotate(-30deg);
      transform-origin: center left;
      z-index: 1;
    }
    
    & .sub-menu {
      display: inline-block;
    }
  }
}

.menu.show-cone .menu__item:hover:after {
    content: 'hover cone';
    background: rgba(0,0,0,.2);
  }

.sub-menu {
  width: 100%;
  display: none;
  background: cadetblue;
  list-style: none;
  top: 0;
  left: 100%;
  padding: 0;
  position: absolute;
}

.sub-menu__item {
  width: 100%;
  padding: 1em;
}

const checkbox = document.getElementById('toggleConeVisibility')

checkbox.addEventListener('change', () => {
  const menu = document.querySelector('.menu');
  menu.classList.toggle('show-cone');
})