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%;
  ...
}

Answer 2

嗯，你可以尝试给你的#navmenu一个固定的高度。

或者，您可以尝试将#navmenu设置为position：fixed（非绝对值）和height：100％。

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

2 个答案: