Question

我正在使用一个界面，该界面利用可滚动div中的项目列表，其中一些使用悬停在rol之外的翻转菜单。禁用脚本兼容性是该站点的优先级，所以我试图在开始进入其他妥协之前看看该接口是否只能用CSS完成。

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

为了在滚动位置更改时保持翻转相对于其父项的位置，我将父li的相对位置设置为子，并将子ul设置为绝对位置。 EXAMPLE 1

当然，一旦溢出：自动打开并且滚动到位，翻转就会从显示中切断。 EXAMPLE 2

我尝试删除父li的相对位置，并保留翻转的绝对定位以将它们从div中释放，但是当滚动位置改变时它们不能正确定位。我只能发布两个链接，但如果你想要一个插图，它就在这里：eypaedesign.com/markets-rollover-issue-no-relative.htm

除了更改UI之外，是否有一些我在这里看不到的属性可以用来使这个界面在CSS上运行？我可以将整个div定位为绝对值，并为翻转器添加大量左边距，但这看起来非常不优雅。

谢谢大家 -

Answer 1

仅使用CSS，您只能使用一个或另一个：overflow: auto或溢出的悬停菜单。对visible和auto使用单独的overflow-x和overflow-y属性不起作用，因此我认为最好的选择是使用您正在考虑的填充解决方案。

正确使用绝对定位和z-index（如果您担心填充菜单容器命中阻塞填充下的任何元素），您应该能够在不破坏其余布局的情况下执行此操作。当然，您必须控制可滚动容器内所有子元素的大小，以便它们不会扩展到其填充父级的整个宽度。

添加这些属性 - 没有其他更改 - 似乎适用于您的网站，所以也许您可以轻松地使用它：

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

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

Answer 2

如果你在你的班级导航中放置293px的高度，它应该没问题。或者在你的project_menu ID中，我可以看到ID的高度为218px，你的UL为293px。

通过更改其中一个，你应该没问题。这取决于你如何设置它影响其他元素。

但是使用project_menu ID应该很好。