html - 使菜单在较小的屏幕上可滚动

Question

我的菜单使用了一系列嵌套的 <ul>带有子标签 <ul>和 <li>在现有 <li> 内电话。据我所知，这是大多数菜单的标准。为了使我的网站在移动设备上运行良好，我决定采用更具响应性的设计方法并使用 @media查询在调整浏览器大小时显示或隐藏内容。

当我的菜单缩小时，下拉菜单会被隐藏(暂时)。稍后我很可能会介绍一个汉堡式菜单，您可以在其中单击 +。移动版菜单旁边的图标并查看它的子链接。

截至目前，当浏览器调整大小时，菜单将按 absolute 排序。显示，这会禁用菜单上的滚动。如果用户(比如在 iPhone 上)将手机横过来，菜单就会被截断，他们无法向下滚动以查看该方向的菜单的其余部分。这是描述问题的图片:

下面是嵌套 html 代码的示例:

<div id="navmenu">
    <ul>
        <li><a href="#" class="homebutton"><div class="home"></div></a></li>
        <li class='storelink dropdown'><a class='dropbtn' href='/store'>Store</a>
            <div class='dropdown-content'>
                <a href='/store?group=1'>All Items</a>
            </div>
        </li>
        <li class='cartmenu'><a href='/cart'>Cart</a></li>
        <li class='accountmenu dropdown'><a class='dropbtn' href='/account'>Account</a>
            <div class='dropdown-content'>
                <a href='/account'>Customer login</a>
            </div>
        </li>
        <li><a href='/services'>Services</a></li>
    </ul>
</div>

最后是相关的CSS

#navmenu .dropdown:hover .dropdown-content {
    display: block;
    position: absolute;
}
#navmenu {
    overflow-y: scroll;
    display: none;
    clear: both;
    background: #333;
    left: 0;
    position: absolute;
    float: none;
    margin: 0;
    padding: 0;
    width: 100%;
    border-bottom: 2px solid #fff;
}
#navmenu ul {
    width: 100%;
    text-align: center;
}
#navmenu li {
    float: none;
    clear: both;
    background: #333;
    width: 100%;
    text-align: center;
}
#navmenu li a {
    display: block;
    width: 100%;
    clear: both;
    margin: 0;
    padding: 10px 0;
}

为什么这个滚动条在调整大小时不滚动？谢谢

Answer 1

尝试添加这个:

#navmenu {
  height: 100%;
  ...
}