CSS滚动菜单-下拉菜单无法正确滚动

Question

我有一个水平滚动菜单，其中一些主菜单项都有一个下拉菜单。问题是如果我滚动主菜单，则下拉菜单不跟随（绝对定位），或者如果我使它们跟随（相对），则它们将主菜单向上推。

绝对：

相对：

CSS为：

.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;
}

关于如何解决此问题的任何建议？

我要寻找的是绝对版本-请注意，下拉菜单位于滚动条上，而不是向下滚动-但子菜单正确对齐。

有关绝对位置划分的示例，请参见jsfiddle：

https://jsfiddle.net/9hjgo1qc/7/

Answer 1

只需在vertical-align:top;类样式上添加.dropdown。解决您的问题。

测试here

更新1

使用JQuery来解决问题。

请参见here

更新2

您只需对jquery方法进行少量更改就可以实现多个菜单的相同功能。

请参见here

Answer 2

就像我在评论中已经说过的那样，您实际上不需要任何定位即可实现此目标。这只是一个好的HTML代码。我已经提供了一个Codepen示例，但它是匿名者，有人重写了它。

只需几行代码，您就可以完全实现所需的功能。我已经开始编辑您的jsfiddle，但想想我已经为您提供了Codepen示例中所需的所有代码：）

.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>

这是伪代码，但是我认为您可以轻松地将其转换为示例。让我知道是否需要我进一步解释。