Pfthb

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/

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

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.