javascript - 如何使 overflow-y 独立于 overflow-x 运行

Question

我正在为导航栏编写一些 CSS，我需要为下拉菜单使用 max-height 和 overflow-y: scroll 以便确保它适合页面。但是，每当我将 overflow-y 属性设置为滚动时，它似乎会自动强制 overflow-x 也必须设置为 scroll，结果，子菜单被隐藏了。

有关工作示例，请参阅下面的 jsfiddle

https://jsfiddle.net/5eyveyfz/

编辑:我应该澄清我的 fiddle 的用途。当您将鼠标悬停在显示相关子菜单的标题为“SubMenu 1”的菜单项上时，就会出现问题。预期的行为是此子菜单在没有滚动条的情况下可见，但它的行为就像 overflow-x 设置为 scroll

Answer 1

更改这些值将在子菜单标题正下方显示下拉菜单:

#menu > ul { 
 overflow-y:scroll;
 overflow-x:hidden;
 max-height:300px;
}

.submenu {
 position:relative;
 display: none;
 left:0; 
 top:0;
}

如果你想保持左边的位置，你需要使容器更宽或将其更改为 display:inline-block;没有设置宽度以适应内容的大小。