CSS Scrolling menu - dropdown menu doesn't scroll properly

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/

Maybe provide enough sample to actually reproduce the issue first? A couple css classes isn't exactly helpful unless you're hoping someone just writes you a menu, you know this amigo... — Chris W.
– Chris W., Commented Nov 9, 2018 at 21:44
Exactly. Provide (at least) HTML to see how did you implement those menus. The catch will be there, I guess. — nemanja
– nemanja, Commented Nov 9, 2018 at 21:45
It's not necessarily the css that is needed here, providing your HTML should be enough. That said, the problem is likely in your HTML. Your absolute positioned submenu should be inside its corresponding parent and that parent should be position: relative — Chaosxmk
– Chaosxmk, Commented Nov 9, 2018 at 21:58
@RGriffiths ok, this is extremely ugly and I made it in few minutes, but it serves a purpose, I guess. No positioning at all needed. Once you provide jsfiddle, I can write an official answer if you wish with more sophisticated and elaborate code :) . codepen.io/anon/pen/zMBjyP — nemanja
– nemanja, Commented Nov 9, 2018 at 22:06

Nimitt Shah · Accepted Answer · 2018-11-13 18:07:06Z

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

edited Nov 13, 2018 at 18:07

answered Nov 9, 2018 at 22:21

Nimitt Shah

4,6072 gold badges12 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

RGriffiths Over a year ago

Thanks, but one thing fixed, another problem emerges. In absolute this does not fix the issue. In relative it simple reverses the problem and pushes the menu down. See fiddle.

Nimitt Shah Over a year ago

If you can use the JQuery then it will be easier to fix it.. jsfiddle.net/nimittshah/1vybc7fz

RGriffiths Over a year ago

Again, many thanks for your efforts. This will work for one sub-menu, but not if there are more than one.

Nimitt Shah Over a year ago

I have updated the answer with Update 2. You can also check it here

RGriffiths Over a year ago

That is fantastic - thank you for all your help with this.

nemanja · Accepted Answer · 2018-11-09 22:54:25Z

0

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.

edited Nov 9, 2018 at 22:54

answered Nov 9, 2018 at 22:26

nemanja

7246 silver badges16 bronze badges

5 Comments

RGriffiths Over a year ago

This is fine but it pushes the menu down. This is in effect the same problem reversed. Look at my fiddle again and how the "More text" doesn't move (orthe menu bar).

nemanja Over a year ago

Well, then I don't understand what it is that you would like to achieve? You said that they either don't follow, or push the menu up. It was logical to me that you want the dropdown menu do open downwards? I'm confused. So if you'd clarify, please...

RGriffiths Over a year ago

I should have written "or the scroll bar". If you look at your answer when the submenu opens the scroll bar drops. This is not the effect we want on a menu - we want the submenu to open over the scroll bar. see the fiddle - it shows you. Appreciate your help.

nemanja Over a year ago

Oh, too bad. It really wasn't clear but now I get what you mean and yeah - this doesn't help in that scenario. Good luck.

RGriffiths Over a year ago

Thanks for trying

Collectives™ on Stack Overflow

CSS Scrolling menu - dropdown menu doesn't scroll properly

2 Answers 2

5 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related