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