在有溢出的父列表前面显示子列表:隐藏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>

对于顶部位置，您需要获取项目的位置并减去当前滚动位置。然后，如果你愿意，你可以添加一个偏移量(在这种情况下是20px(。

对于左侧位置，您可以获得宽度，并可以使用百分比来确定其显示位置(在本例中为从左侧起的75%(。

参考：CSS技巧。