title: How to make a drop-down menu scrollable
body: <p>I am trying to build a drop-down menu in a navbar. I have done this, but the list of items is too long to fit on the page (the bottom of the list is hidden) so I therefore need to make the list scrollable. As of now, when the menu is "open" and I scroll, it scrolls the page behind the menu rather than the menu. Please help me figure this out! Below I have posted a bit of my HTML and CSS as it pertains to this drop down menu.</p>
  
  <pre><code>&lt;li class="nav-item dropdown"&gt;
                      &lt;a href="#" class="nav-link dropdown-toggle scrollable-menu" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;INSTRUMENTS&lt;/a&gt;
                      &lt;div class="dropdown-menu" aria-labelledby="navbarDropdown"&gt;
                          {% for instrument in instruments %}
                              &lt;a href="{% url 'instruments:individual_display' instrument.id %}" class="dropdown-item"&gt; {{ instrument.name }} &lt;/a&gt;
                          {% endfor %}
                      &lt;/div&gt;
                  &lt;/li&gt;
  
  .scrollable-menu {
      height: auto;
      max-height: 500px;
      overflow-x: hidden;
  }
  </code></pre>