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

Question

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

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

https://jsfiddle.net/5eyveyfz/

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

Answer 1

虽然它没有在你的小提琴中这样做 - 你实际构建中填充的数据是否可能迫使表格溢出其宽度？

如果是，请将容器更改为overflow-x：hidden;为了防止水平滚动条。

Answer 2

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

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

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

如果要保持左侧位置，则需要将容器放宽或更改为显示：inline-block;没有设置宽度以适应内容的大小。