固定侧边栏菜单悬停在可滚动时不可见答案

【问题标题】：Fixed sidebar menu hover not visible when scrollable固定侧边栏菜单悬停在可滚动时不可见
【发布时间】：2016-06-14 00:13:42
【问题描述】：

我们有一个网站正在开发中。菜单栏固定在页面的左侧。当窗口大小减小到大约 700px 的高度时，部分菜单不再可见，因此我们需要使其可垂直滚动。

当我们添加时

overflow-y: scroll;

到 .main-header 区域现在是可滚动的，但悬停在子菜单上被切断。

非常感谢任何帮助。开发站点在这里：http://washingtongroup.sbcomms-dev.co.uk/

【问题讨论】：

如果您不共享代码，我们将无法帮助您。
抱歉，我忘记将 URL 添加到开发站点。我通常会在问题中添加代码，但不确定要在此处添加什么，因为发生了很多事情......
属性溢出隐藏超出高度和宽度的内容。我认为您必须调整子菜单框的宽度。但是，没有你的代码，我不能再说了。
这会有帮助吗？ codepen.io/sbcomms/pen/yJNVaV
您是否在子菜单框中尝试过 z-index ？

标签： css

【解决方案1】：

问题似乎出现了，因为您的容器设置为溢出-y 滚动并且您的溢出-x 被隐藏，这使您的悬停状态剪辑水平。为避免这种情况，您需要根据 W3c 将 overflox-x 设置为可见但：https://www.w3.org/TR/css3-box/#overflow-x

'overflow-x' 和 'overflow-y' 的计算值与其指定的值相同，除了某些与 'visible' 的组合是不可能的：如果一个被指定为 'visible' 而另一个是“滚动”或“自动”，然后“可见”设置为“自动”。如果‘overflow-y’相同，‘overflow’的计算值等于‘overflow-x’的计算值；否则就是‘overflow-x’和‘overflow-y’的一对计算值。

因此，实际上，如果您对overflow-x 或overflow-y 使用visible，而对另一个使用不可见的东西。可见值被解释为 auto，这反过来又创建了剪辑。

在我看来，您必须实施不同的布局策略，因为您的标题区域是 position:fixed 并具有定义的宽度。如果我是你，我会将“标题”区域设置回静态位置，并让菜单与页面的其余部分一起滚动。

这是一个可视化，可以查看更多上下文，以表明如果不彻底改变布局方法，您当前的方法将无法工作：

http://www.brunildo.org/test/Overflowxy2.html

【讨论】：