在具有 overflow:hidden 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位置，需要获取item的位置，减去当前滚动位置。然后您可以根据需要添加偏移量（在本例中为 20px）。

对于 left 位置，您可以获得宽度并可以使用百分比来确定它的显示位置（例如在这种情况下从左侧开始的 75%）。

参考：CSS-tricks.

在具有 overflow:hidden DIV 的父列表前面显示子列表

Show A Sub-List In Front Of Parent List That Have overflow:hidden DIV

html

css

scroll

overflow