Многоуровневое сворачиваемое меню - не удается достичь элемента, расположенного после подменю

#css

Вопрос:

Я не могу получить доступ к элементу списка, который расположен на уровне 2, сразу после подменю уровня 3, потому что, когда я выхожу из подменю уровня 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>

1. Вероятно, потому, что вы установили ширину содержащего div в 19.692em и скрыли переполнение. Кроме того, вы должны использовать классы, поскольку ваши селекторы css очень неэффективны

2. Я попытался удалить ширину и переполнение. Но это не имело никакого эффекта.

Ответ №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>

1. Спасибо. Это довольно сложно для непосвященных, таких как я.

2. Но теперь все элементы уровня 1 раскрываются при наведении курсора мыши на любой из них. Есть ли другой способ?