1

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

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

为了在滚动位置发生变化时保持滚动位置相对于其父级，我定位了父级 li 的相对位置和子级 ul 的绝对位置。
例 1

当然，一旦overflow:auto开启并且滚动到位，翻转就会停止显示。 例 2

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

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

谢谢各位——

4

2 回答 2

2

仅使用 CSS，您只能使用其中一种：overflow: auto或溢出的悬停菜单。对and使用单独的visible和auto属性不起作用，所以我认为你最好的选择是使用你正在考虑的填充解决方案。overflow-xoverflow-y

通过正确使用绝对定位和z-index（如果您担心填充菜单容器会阻止填充下的任何元素），您应该能够在不破坏布局的其余部分的情况下做到这一点。当然，您必须控制可滚动容器内所有子元素的大小，这样它们就不会扩展到填充父元素的整个宽度。

添加这些属性 - 没有其他更改 - 似乎在您的网站上工作，所以也许您可以轻松摆脱它：

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

.center {
  position: relative;
  z-index; 10;
}
于 2012-09-14T19:04:59.343 回答
0

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

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

但是使用 project_menu ID 应该很好。

于 2012-09-14T18:55:49.290 回答