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

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

测试一下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>

这是虚拟代码，但我认为您可以轻松地将其转换为您的示例。如果您需要我进一步解释，请告诉我。