如何制作下拉菜单滚动选项卡

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吗？现在没有时间去做一个例子，但这应该会给你指明一个正确的方向。在

你可以找到一个类似的帖子here了解更多信息。在

Answer 2

我想你错过了正确的选择器下拉列表-菜单是正确的选择器如果未解决，请尝试overflow:auto; 如果没有解决，请尝试这个example