多级可折叠菜单-无法到达子菜单后放置的项目

Question

我无法到达位于第3层子菜单之后的第2层的列表元素，因为当我将鼠标悬停在第3层子菜单之外时，整个菜单会折叠到第1层。

我无法访问的项目在代码中的标题为“无法访问”。

注意：如果我绕过了2级菜单，即没有触发2级菜单就可以到达该项目。但是在大多数情况下，最终用户会在接近该菜单之前将鼠标悬停在2级之上，并且不会能够采取行动。

.side-nav-bar-menu {
  position: absolute;
  height: 100%;
  overflow: hidden;
  white-space: nowrap;
  width: 19.692em;
  padding-top: 0.385em;
}

.side-nav-bar-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  background-color: red;
}
 
.side-nav-bar-menu li:hover {
  background-color: blue
}

.side-nav-bar-menu ul li ul {
  display: none;
}

.side-nav-bar-menu ul li:hover > ul {
  display: block;
}

.side-nav-bar-menu ul li ul li {
  margin-left: 15px;
}

.side-nav-bar-menu ul li ul li ul li {
  margin-left: 30px;
}

<div class="side-nav-bar-menu">
  <ul>
    <li>
      <a>L1</a>
      <ul>
        <li><a>L2</a></li>
        <li>
          <a>L2</a>
          <ul>
            <li><a>L3</a></li>
            <li><a>L3</a></li>
          </ul>
        </li>
        <li><a>Unreachable</a></li>
      </ul>
    </li>
    <li>
      <a>L1</a>
      <ul>
        <li><a>L2</a></li>
      </ul>
    </li>
  </ul>
</div>

Answer 1

已使用新修复程序更新

尝试一下：

.side-nav-bar-menu {
  position: absolute;
  height: 100%;
  overflow: hidden;
  white-space: nowrap;
  width: 19.692em;
  padding-top: 0.385em;
}

.side-nav-bar-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  background-color: red;
}
 
.side-nav-bar-menu li:hover {
  background-color: blue
}

.side-nav-bar-menu ul li ul {
  display: none;
}

.side-nav-bar-menu ul li:hover ul{
  display: block;
}

.side-nav-bar-menu ul li ul li {
  margin-left: 15px;
}

.side-nav-bar-menu ul li ul li ul li {
  margin-left: 30px;
}

<div class="side-nav-bar-menu">
  <ul>
    <li>
      <a>L1</a>
      <ul>
        <li><a>L2</a></li>
        <li>
          <a>L2</a>
          <ul>
            <li><a>L3</a></li>
            <li><a>L3</a></li>
          </ul>
        </li>
        <li><a>Reachable</a></li>
      </ul>
    </li>
    <li>
      <a>L1</a>
      <ul>
        <li><a>L2</a></li>
      </ul>
    </li>
  </ul>
</div>