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

Question

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

当我们添加

时

overflow-y: scroll;

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

任何帮助非常感谢。开发网站位于：http://washingtongroup.sbcomms-dev.co.uk/

Answer 1

问题似乎是因为你的容器被设置为溢出-y滚动而你的overflow-x被隐藏，这使你的悬停状态剪辑在水平上。为避免这种情况，您需要根据W3c将overflox-x设置为可见BUT：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使用可见，而对另一个使用不可见。可见值被解释为auto，这反过来又创建了剪辑。

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

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

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