html - IE 和 Chrome 滚动条干扰菜单导航

Question

我已经为网站编写了一个简单的 HTML CSS 导航菜单位置:固定。菜单下拉菜单设置为 overflow-y:scroll 并且子 uls 在 parent 旁边(参见 http://www.goodskiguide.com/gsgs-complete-a-z-resorts-guide/)

滚动条不会干扰 firefox，因为它只在您实际滚动时出现，但在 Chrome 和 IE 中它始终存在，因此当您将光标导航到右侧以选择子 li 时，悬停属性会丢失。

任何人都可以建议我如何解决这个问题。如果修复了 enplyos jQuery，那么请您提供详细信息，因为我的 jQ 知识还不是很清楚。

谢谢

Answer 1

我想到了一种简单的解决方案。解决方案基本上是将通常位于滚动条另一侧的容器的 padding-left 设置为接近滚动条宽度的值，如下所示

ul{padding-left:30px;}  //or whatever the width of the scroll bar is

所以这应该有效地创建一个覆盖滚动条的透明左端，这样当鼠标悬停在滚动条上时，它实际上悬停在滚动条另一侧的内容上，因此保持悬停状态。这是 fiddle显示示例，它适用于 chrome、IE 和 firefox