CODEWITHSUNDEEP
htmlcss
RGriffiths
RGriffiths

Reputation: 5970

CSS Scrolling menu - dropdown menu doesn't scroll properly

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:

enter image description here

Relative:

enter image description here

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/

Upvotes: 0

Views: 10159

Answers (2)

Nimitt Shah
Nimitt Shah

Reputation: 4587

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

Upvotes: 1

nemanja
nemanja

Reputation: 694

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.

Upvotes: 0

Related Questions