CSS Scrolling menu - dropdown menu doesn't scroll properly - html

Question

I have a horizontal scrolling menu with some of the main menu items having a dropdown menu. The problem is if I scroll the main menu the drop down menus do not follow (absolute positioning), or if I make them follow (relative) they push the main menu up.
Absolute:
Relative:
The CSS is:
.navbar {
width:100%;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
}
.dropdown-content {
display: none; //displayed on hover
position: absolute; //or relative
background-color: #f9f9f9;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
Any suggestions as to what I can do to fix this?
What I am looking for is the absolute version - notice the drop down menu drops over the scroll bar, not pushing it down - but with the sub menu properly aligned.
See jsfiddle for example of absolute postioning:
https://jsfiddle.net/9hjgo1qc/7/

Answer 1

Just add vertical-align:top; on .dropdown class style. Fixes your problem.
Test it here
Update 1
Used JQuery to fix the problem.
See here
Update 2
You can achieve same thing for multiple menus with minor change in jquery method.
See here

Answer 2

Like I already said in the comment, you don't actually need any kind of positioning to achieve this. It's just a matter of good HTML code. I have already provided a codepen example, but it was anonymus and someone had rewritten it.
You can achieve exactly what you want in just a few lines of code. I have started editing your jsfiddle, but figured I have already given you all the code needed in my codepen example :)
.navbar {
margin: 200px auto;
display: flex;
width: 800px;
overflow-x: scroll;
}
ul {
min-width: 250px;
list-style: none;
}
li {
display: inline-block;
text-align: center;
height: 40px;
line-height: 40px; /* quick hack to center text vertically (assuming it is just one line), but I wouldn't use it for production - it is just for this quick example */
background: beige;
margin: 0;
border: 1px solid white;
}
ul li:not(:first-child) {
height: 0;
transition: all .3s ease-in;
visibility: hidden;
/* alternatively you can use transform and scaleY
transform: scaleY(0);
transform-origin: 50% 0; */
}
ul:hover li:not(:first-child) {
height: 40px;
visibility: visible;
/* transform: scaleY(1); */
}
<div class="navbar">
<ul>
<li>M1</li>
<li>M1-1</li>
<li>M1-2</li>
</ul>
<ul>
<li>M2</li>
<li>M2-1</li>
<li>M2-2</li>
</ul>
<ul>
<li>M3</li>
<li>M3-1</li>
<li>M3-2</li>
</ul>
<ul>
<li>M4</li>
<li>M4-1</li>
<li>M4-2</li>
</ul>
<ul>
<li>M5</li>
<li>M5-1</li>
<li>M5-2</li>
</ul>
</div>
This is dummy code, but I think you can translate it to your example, easily. Let me know if you need me to explain this further.