移动设备/平板电脑上的大菜单问题答案

【问题标题】：Problem with large menu on mobile devices / tablets移动设备/平板电脑上的大菜单问题
【发布时间】：2019-11-20 10:34:02
【问题描述】：

我正在为客户开发 WordPress 网站。我有一个（大）菜单，其中包含许多子菜单项。

问题：在移动设备/平板电脑上，主菜单的滚动被锁定，当顶部项目打开时，一些子菜单项不可见。

- 仅可见 6 项中的 3 项

有可能以某种方式解决这个问题吗？有什么想法吗？

我尝试使用从this website 获得的以下代码（也可以使用自动滚动）*：

@media (hover: none) and (pointer: coarse) 
{
  #primary-menu 
  {
    overflow-y: scroll !important; 
  }
}

Link to my website

【问题讨论】：

标签： php html css wordpress mobile

【解决方案1】：

将溢出的 css 提供给#masthead

#masthead{
overflow:auto;
}

【讨论】：

它正在工作，但显示时，菜单的高度是显示时图像的高度。是否可以在显示时将菜单的高度设为 90-100%，仅使用 CSS？

【解决方案2】：

使用 Omi 的答案，经过几个小时的努力，我找到了解决方案（但仍在测试）：

/*This query will take effect for any screen smaller than 760px and also iPads specifically.*/
@media only screen and (max-width: 760px), 
(min-device-width: 768px) and (max-device-width: 1024px)  
{
   /*...*/
    .mean-container .mean-nav 
    {
        overflow-y: auto;
        max-height: 45vh; /*old value: 75vh*/
        overflow-x: hidden;
    }
}

【讨论】：