固定位置侧边栏中的溢出问题答案

【问题标题】：Overflow issue in a fixed position sidebar固定位置侧边栏中的溢出问题
【发布时间】：2018-02-14 03:06:52
【问题描述】：

我有一个固定的侧边栏，带有overflow-x:hidden，所以我有一个滚动条来滚动。但现在我想添加一个子菜单，显示时会溢出到主窗口。

如果我设置了overflow:visible，这可以正常工作，但是我失去了滚动能力。

我可以把它们都放在一起吗？

#sidebar-wrapper {
  width: 200px;
  background-color: #396DA5;
  position: fixed;
  height: 100%;
  overflow-x: hidden;
}

#menu ul ul {
  display: none;
  list-style: none;
}

#menu ul ul {
  position: relative;
}

#menu ul li:hover > ul {
  display: block;
}

#menu ul ul {
  padding: 50px;
  position: absolute;
  left: 80%;
  top: 0;
  background: #f00;
}

<div id="sidebar-wrapper">
  <div id=menu>
    <ul>
      <li>Item Hover
        <ul>
          <li>subitem<li>
        </ul>
        </li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
  </div>
</div>

顶部的li项有一个悬停，当overflow-x:hidden从顶部css行中删除时可以完全看到，但是侧边栏不能滚动！

编辑 - 答案说使用 position:fixed 这有效。但这可以应用于任何列表项，以便在父项旁边打开子菜单吗？

【问题讨论】：

标签： html css

【解决方案1】：

无需添加overflow-y。

你的班级应该是

#menu ul  li:hover > ul {
  display: block;
  position: fixed;
  top: 8px;
  left: 150px;
}

DEMO

【讨论】：

是的，谢谢，但会带来一个新问题 - 位置可以是相对的，因此它可以用于列表中的任何项目的子菜单吗？我在列表的下方添加了第 2 项 - codepen.io/anon/pen/RNxyVP
哇，这真的有效，谢谢！。但是如果我需要overflow-y 属性怎么办？有解决办法吗？

【解决方案2】：

试试溢出-y：滚动

并将悬停框设置为固定位置：

#menu ul ul { padding:50px;     position: fixed; left: 200px; top:0; background:#f00;}

您需要调整位置。

虽然不是一个非常漂亮的解决方案。

【讨论】：