Html CSS中带有垂直溢出的水平滚动

我希望在页面顶部有一个导航菜单，显示菜单项，悬停时显示子菜单项，并允许滚动条水平溢出。解决方案不能需要JavaScript

如果没有水平溢出，我可以让下拉菜单正常工作

我也可以用我想要的方式来做水平运动

但是我失去了垂直溢出，所以我根本看不到我的下拉列表

菜单只需要是最初可见菜单项的高度，显然，在示例中，按钮需要是可点击的

我认为问题在于将

overflow-x

设置为

auto

会创建一个新的块格式上下文，这样

overflow-y

就不能

可见

，而我的溢出就会被隐藏

有什么方法可以同时使用水平滚动和垂直溢出

。菜单项--深度-0{
/*这三个选项为我提供了所需的水平滚动条，但随后下拉列表无法显示*/
宽度：300px；
溢出-x：自动；
溢出y：隐藏；
空白：nowrap；
位置：相对位置；
z指数：0；
}
.菜单项{
列表样式：无；
保证金：0；
填充：0；
}
.菜单项--深度-0{
显示：内联块；
}
.菜单项{
位置：相对位置；
边框：1px纯灰；
高度：30px；
背景：白色；
}
.菜单项--深度1{
位置：绝对位置；
排名：0；
左：0；
宽度：200px；
不透明度：0；
指针事件：无；
过渡时间：300ms；
z指数：1；
}
.菜单项--深度-0:悬停.菜单项--深度-1{
指针事件：全部；
不透明度：1；
变换：translateY（30px）；
}

菜单项一

菜单项一-一
菜单项一-二
菜单项一-三
菜单项一-四



菜单项二

菜单项二-一
菜单项二-二
菜单项二-三
菜单项二-四


菜单项三

菜单项四

菜单项四-一
菜单项四-二
菜单项四-三
菜单项四-四



一些可点击的东西

。菜单项--深度-0{
/*这三个选项为我提供了所需的水平滚动条，但随后下拉列表无法显示*/
宽度：300px；
溢出-x：自动；
/**您不需要overflow-y**/
/*对于要显示的子菜单，您需要与元素保持一定的高度，或者在ul元素下方创建一些div元素。这样您就可以看到div元素上方的子菜单*/
高度：200px；
空白：nowrap；
位置：相对位置；
z指数：0；
}
.菜单项{
列表样式：无；
保证金：0；
填充：0；
}
.菜单项--深度-0{
显示：内联块；
}
.菜单项{
位置：相对位置；
边框：1px纯灰；
高度：30px；
背景：白色；
}
.菜单项--深度1{
位置：绝对位置；
排名：0；
左：0；
宽度：200px；
不透明度：0；
指针事件：无；
过渡时间：300ms；
z指数：1；
}
.菜单项--深度-0:悬停.菜单项--深度-1{
指针事件：全部；
不透明度：1；
变换：translateY（30px）；
}

菜单项一

菜单项一-一
菜单项一-二
菜单项一-三
菜单项一-四



菜单项二

菜单项二-一
菜单项二-二
菜单项二-三
菜单项二-四


菜单项三

菜单项四

菜单项四-一
菜单项四-二
菜单项四-三
菜单项四-四



一些可点击的东西

超出容器菜单的必须设置位置：固定

---

在其他情况下，需要使用JS您可以尝试如下，我使用

ul li

标记，而不是使用

类

，这些类被分配给

ul

和

li的

多次，头部ul作为父元素在这里工作，宽度为

300px