如何使下拉菜单可滚动

Question

我正在尝试在导航栏中构建一个下拉菜单。 我已经做到了，但是项目列表太长而无法容纳在页面上（列表的底部被隐藏了），因此我需要使列表可滚动。 截至目前，当菜单为“打开”并且我滚动时，它将滚动菜单后面的页面而不是菜单。 请帮我弄清楚！ 在下面，我发布了一些与该下拉菜单有关的HTML和CSS。

<li class="nav-item dropdown">
                    <a href="#" class="nav-link dropdown-toggle scrollable-menu" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">INSTRUMENTS</a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        {% for instrument in instruments %}
                            <a href="{% url 'instruments:individual_display' instrument.id %}" class="dropdown-item"> {{ instrument.name }} </a>
                        {% endfor %}
                    </div>
                </li>

.scrollable-menu {
    height: auto;
    max-height: 500px;
    overflow-x: hidden;
}

Answer 1

您是否尝试过使用overflow-y: auto或overflow-y: scroll ？ 目前尚无时间处理示例，但这应该为您指明正确的方向。

您可以在此处找到类似的帖子以了解更多信息。

Answer 2

我认为您缺少正确的选择器。下拉菜单是正确的选择器，如果未解决，请尝试overflow:auto; 如果没有解决，请尝试以下示例