Показать подсписок перед родительским списком с переполнением: скрытый DIV

Question

Я создаю боковое меню, которое будет иметь подсписок, который будет виден при наведении курсора. Для этого у меня есть следующий код:

#sidebar {
  width: 160px; position: relative;
}
.parent {
  width: 160px;
  height: 400px;
  position: relative;
  overflow-y: scroll;
  overflow-x: hidden;
}
.child {
  height: 0px;
  overflow:hidden;
  position: absolute;
  left: 120px;
}
.sub_menu:hover .child {
  height: 100px;
  width: 300px;
  background: #DDD;
}
.sub_menu {
  position: relative;
}

<div id="sidebar">
  <ul class="parent">
    <li>XXXXXXXXXXXX</li>
    <li>XXXXXXXXXXXX</li>
    <li>XXXXXXXXXXXX</li>
    <li>XXXXXXXXXXXX</li>
    <li>XXXXXXXXXXXX</li>
    <li>XXXXXXXXXXXX</li>
    <li>XXXXXXXXXXXX</li>
    <li class="sub_menu">YYYYYYYYYYY
      <ul class="child">
        <li>Need To Show This In Full Width</li>
        <li>XXXXXXXXXX</li>
        <li>XXXXXXXXXX</li>
        <li>XXXXXXXXXX</li>
      </ul>
    </li>
    <li>XXXXXXXXXXXX</li>
    <li>XXXXXXXXXXXX</li>
    <li>XXXXXXXXXXXX</li>
    <li>XXXXXXXXXXXX</li>
    <li>XXXXXXXXXXXX</li>
    <li>XXXXXXXXXXXX</li>
    <li>XXXXXXXXXXXX</li>
    <li>XXXXXXXXXXXX</li>
    <li>XXXXXXXXXXXX</li>
    <li>XXXXXXXXXXXX</li>
    <li>XXXXXXXXXXXX</li>
    <li>XXXXXXXXXXXX</li>
    <li>XXXXXXXXXXXX</li>
    <li>XXXXXXXXXXXX</li>
    <li>XXXXXXXXXXXX</li>
    <li>XXXXXXXXXXXX</li>
    <li>XXXXXXXXXXXX</li>
    <li>XXXXXXXXXXXX</li>
    <li>XXXXXXXXXXXX</li>
    <li>XXXXXXXXXXXX</li>
    <li>XXXXXXXXXXXX</li>
    <li>XXXXXXXXXXXX</li>
    <li>XXXXXXXXXXXX</li>
    <li>XXXXXXXXXXXX</li>
    <li>XXXXXXXXXXXX</li>
    <li>XXXXXXXXXXXX</li>
    <li>XXXXXXXXXXXX</li>
  </ul>
</div>

Проблема в том, что мой подсписок скрывается за родительским DIV из-за overflow-y: scroll; overflow-x: hidden;, который мне нужен также потому, что я делаю меню с фиксированной высотой, так что если содержит больше элементов, тогда будет отображаться полоса прокрутки только по оси Y.

Так возможно ли это в моем верхнем коде?

Answer 1

Вы можете установить position: relative на самый внешний <div> (#sidebar) и расположить подменю, используя JavaScript.

document.querySelectorAll("li.sub_menu").forEach(function(item) {

  item.addEventListener("mouseover", function() {
        submenuWrapper = item.querySelector(".child"),
        menuItemPosTop = (item.offsetTop - document.querySelector("#sidebar > ul").scrollTop) + 20 + "px",
        menuItemPosLeft = Math.round(item.offsetWidth * 0.75) + "px"
      
    submenuWrapper.style.cssText = "top:" + menuItemPosTop + "; left:" + menuItemPosLeft;
  })

})

#sidebar {
  position: relative;
}

ul {
  width: 160px;
  max-height: 400px;
  overflow-x: hidden;
  overflow-y: auto;
  list-style: none;
}

li {
  position: static;
}

li .child {
  position: absolute;
  z-index: 10;
  display: none;
}

li:hover > .child {
  display: block;
}

ul {
  margin: 1em;
  color: white;
  font-family: sans-serif;
  font-size: 16px;
}

li {
  padding: 1em;
}

li ul {
  margin: 0;
}

li .child {
  cursor: auto;
}

li .child li {
  padding: 12px 20px;
}

li:nth-child(2n) {
  background: #949494;
}

li:nth-child(2n+1) {
  background: #bbbbbb;
}

li.sub_menu {
  background: #505050;
  cursor: pointer;
}

<div id="sidebar">
  <ul>
    <li>XXX XXX XXX XXX</li>
    <li>XXX XXX XXX</li>
    <li>XXX XXX</li>
    <li>XXX</li>
    <li class="sub_menu">YYYYYYYYYYY
      <div class="child">
        <ul>
          <li>XXX XXX XXX</li>
          <li>XXX XXX</li>
          <li>XXX</li>
        </ul>
      </div>
    </li>
    <li>XXX XXX XXX XXX</li>
    <li>XXX XXX XXX</li>
    <li>XXX XXX</li>
    <li>XXX</li>
    <li>XXX XXX XXX XXX</li>
    <li>XXX XXX XXX</li>
    <li>XXX XXX</li>
    <li>XXX</li>
  </ul>
</div>

Для позиции top необходимо получить позицию элемента и вычесть текущую позицию прокрутки. Затем вы можете добавить смещение, если вы будете sh (в данном случае 20 пикселей).

Для позиции left вы получите ширину и можете использовать процент, чтобы определить, где она будет (например, 75% слева в этом случае).

Ссылка: CSS -трюки .