Dropdown out of sticky menu (with overflow-x) - css

Question

I created a sub menu with sticky properties (so that it is always visible) and with an overflow-x so that it can be used on a tablet or a smartphone.
The problem is that the dropdown menu I added does not come out of this submenu.
DEMO : https://jsfiddle.net/qhmj4tpr/3/
HTML :
<div class="navbar navbar-expand-lg bg-white d-flex flex-nowrap justify-content-between align-items-center top-menu">
LOGO
</div>
<div class="scroll-menu">
<nav class="nav nav-menu">
<div class="nav-menu-l">
<a class="nav-link nav-title active" href="#"> Title</a>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" data-boundary="scrollParent" aria-haspopup="true" aria-expanded="false">
<span class="badge badge-secondary">10</span> Menu
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Menu 1</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Menu 2</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Menu 3</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Menu 4</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Menu 5</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Menu 6</a>
</div>
</li>
<a class="nav-link nav-title" href="#" style="width: 600px">
</a>
</div>
<div class="nav-menu-r">
<a class="btn btn-primary btn-sm" href="#>"> Print</a>
</div>
</nav>
</div>
<div class="main">
Qui cum venisset ob haec festinatis itineribus Antiochiam, praestrictis palatii ianuis, contempto Caesare, quem videri decuerat, ad praetorium cum pompa sollemni perrexit morbosque diu causatus nec regiam introiit nec processit in publicum, sed abditus multa in eius moliebatur exitium addens quaedam relationibus supervacua, quas subinde dimittebat ad principem.
</div>
CSS :
.top-menu {
height: 50px;
border-bottom: 1px solid #eff0f6;
z-index: 10;
}
.scroll-menu {
position: sticky;
top: 0px;
z-index: 2;
height: 2.75rem;
overflow-y: hidden;
height: 70px;
box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,.075);
background-color: #fff;
}
.scroll-menu .nav-menu {
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
height: 70px;
overflow-x: auto;
color: rgba(255, 255, 255, .75);
text-align: center;
white-space: nowrap;
padding-right: 1rem;
padding-left: .5rem;
}
.nav-menu-l, .nav-menu-r {
display: flex;
flex-wrap: nowrap;
}
.main {
padding: 20px;
height: 900px;
}
I really need to be able to scroll horizontally the menu, I use BootStrap but if you have a solution with custom CSS I'm a taker