My dropdown menu is not displaying properly when there is a scroll bar on the page. I am using Bootstrap for my website.
https://i.sstatic.net/tZFXh.png
Below is the HTML code I am using:
<a tabindex="-1" href="#">Location</a>
<ul class="dropdown-menu scrollable-menu">
<li class="dropdown-submenu">
<a href="#">Afghanistan</a>
<ul class="dropdown-menu scrollable-menu">
<li><a class="small" data-value="option3" tabIndex="-1"><input type="checkbox"/> Select all</a></li>
<li class="divider"></li>
</ul>
</li>
</ul>
This is how I have styled it in CSS:
.scrollable-menu {
height: auto;
max-height: 405px;
overflow-x: hidden;
}