Question

我有一个固定的侧边栏，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项目有一个悬停，当从顶部css行中移除overflow-x:hidden时可以完全看到，但是侧栏无法滚动！

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

Answer 1

尝试 overflow-y：滚动

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

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

您需要调整位置。

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

Answer 2

无需添加overflow-y。

你的课应该是

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

DEMO

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

2 个答案: