带有css滚动的可滚动div=溢出问题

我正在开发一个界面，该界面利用可滚动div中的项目列表，其中一些利用了扩展到div之外的悬停上的滚动菜单。禁用脚本兼容性是该站点的优先事项，因此我尝试在开始进行其他折衷之前，看看该界面是否可以仅使用CSS完成

下面我有一些例子。有问题的菜单位于右侧，标题为“选择项目”。每个页面顶部的第三个列表项包含一个滚动菜单

为了在滚动位置更改时保持滚动相对于其父项的位置，我将父项li的相对位置和子项ul的绝对位置定位。

当然，一旦启用“溢出：自动”且滚动条就位，滚动条将被切断显示。

我尝试移除父li的相对位置，并保留滚动的绝对位置以将它们从div中释放出来，但当滚动位置发生变化时，它们无法正确定位。 我只能发布两个链接，但如果你想要一个说明，请点击这里：eypaedesign.com/markets-rollover-issue-no-relative.htm

除了更改UI之外，是否有我在这里没有看到的属性组合可用于使此界面在CSS上工作？我可以将整个div定位为绝对，并添加大量左侧填充以显示滚动，但这似乎很不雅观

---

谢谢各位-

如果您在课堂导航中设置293px的高度，应该可以。 或者在你的项目菜单ID中，我可以看到ID的高度是218px，你的UL是293px

通过改变其中一个，你应该是好的。这取决于您如何设置它以影响其他元素

---

但是使用project_菜单ID应该很好。

仅使用CSS，您只能使用一个或另一个：

溢出：自动

或溢出悬停菜单。为

overflow-x

和

overflow-y

使用单独的

visible

和

auto

属性不起作用，因此我认为您最好的选择是使用您正在考虑的填充解决方案

通过正确使用绝对定位和

z-index

（如果您担心填充菜单容器命中会阻塞填充下的任何元素），您应该能够在不破坏其余布局的情况下完成此操作。当然，您必须控制可滚动容器中所有子元素的大小，这样它们就不会扩展到填充父元素的整个宽度

添加这些属性（无需其他更改）似乎在您的网站上起作用，因此您可能可以轻松解决：

#project_menu {
  padding-left: 300px;
  margin-left: -300px;
}

.center {
  position: relative;
  z-index; 10;
}

---

我没有想到负利润的想法-我会调查它-非常感谢你分享。