CSS:打开多个元素时垂直菜单不可滚动

Question

我在网站上垂直菜单的移动版本（1299px@media定义的规则）上滚动时遇到问题。链接为：https://my-digital.ro/wp/

视频讲解问题：https://youtu.be/K9fQJPb6WMI

所以基本上，我的问题是我试图使整个菜单在移动设备上可滚动。当我添加溢出时，它工作正常：将属性滚动到元素，除了在展开子菜单时它不起作用。它只是卡住了，因为它溢出了：隐藏，我无法进一步滚动。

实际的CSS是：

.clearfix {
display:block;
clear: both;
position: sticky;
}
@media only screen and (max-width: 1299px) {
#content {
    position:absolute;
    padding-left:0px;
    z-index:102
}
#main-nav {
    overflow: scroll;
}
.clearfix {
    overflow: scroll;
}
header {
    position:fixed;
    min-height:100%;
    height:auto; }

我尝试添加溢出：滚动甚至到规则中的标题元素@1299px以及其他元素，包括 ul>li .submenu，但没有任何效果:(。

Answer 1

为main_nav提供一些相对高度：

#main-nav {
    overflow-y: auto;
    height: 90vh;
}

其中vh相对于视口高度的 1%。

请使用overflow: auto;而不是overflow: scroll;

Answer 2

只需在样式中进行这些更改.css

@media only screen and (max-width: 1299px)
#main-nav {
    overflow-y: auto;
    height: 400px;
}