Html CSS滚动菜单-下拉菜单不'；不能正常滚动

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

绝对：

亲属：

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

关于我能做些什么来解决这个问题，有什么建议吗

我要找的是绝对版本-注意下拉菜单放在滚动条上，而不是向下推-但是子菜单正确对齐

有关绝对位置的示例，请参见JSFIDLE：

---

只需添加

垂直对齐：顶部打开
。下拉列表
类样式。解决你的问题

测试一下

更新1

使用JQuery解决了这个问题

看

更新2

您只需对jquery方法进行微小的更改，就可以为多个菜单实现相同的功能

请看
正如我在评论中所说的，您实际上不需要任何定位来实现这一点。这只是一个好的HTML代码的问题。我已经提供了一个代码笔示例，但它是匿名的，有人重写了它

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


.navbar{
利润率：200px自动；
显示器：flex；
宽度：800px；
溢出-x：滚动；
}
保险商实验室{
最小宽度：250px；
列表样式：无；
}
li{
显示：内联块；
文本对齐：居中；
高度：40px；
行高：40px；/*快速将文本垂直居中（假设只有一行），但我不会在生产中使用它-它只是用于这个快速示例*/
背景：米色；
保证金：0；
边框：1px纯白；
}
ul li：不是（第一个孩子）{
身高：0；
过渡：所有.3s都很轻松；
可见性：隐藏；
/*或者，可以使用transform和scaleY
变换：scaleY（0）；
变换原点：50%0*/
}
ul:悬停li:不是（：第一个孩子）{
高度：40px；
能见度：可见；
/*变换：scaleY（1）*/
}


M1
M1-1
M1-2


平方米
M2-1
M2-2


M3
M3-1
M3-2


M4
M4-1
M4-2


M5
M5-1
M5-2

是否可以先提供足够的样本来实际重现问题？几个css类并没有什么帮助，除非你希望有人给你写一个菜单，你知道这个朋友…没错。提供（至少）HTML以查看如何实现这些菜单。我想，问题就在这里。这里不一定需要css，提供HTML就足够了。也就是说，问题可能出在HTML中。绝对定位子菜单应位于其相应的父菜单内，且该父菜单应位于以下位置：relative@RGriffiths好吧，这非常难看，我在几分钟内就做到了，但我想这是有目的的。根本不需要定位。一旦您提供了jsfiddle，如果您愿意，我可以用更复杂、更精细的代码编写一个正式的答案：）。这很好，但它会向下推菜单。事实上，同样的问题反过来了。再看看我的小提琴，“更多文本”是如何不移动的（或菜单栏）。那么，我不明白你想要实现什么？你说他们要么不听，要么把菜单往上推。对我来说，你希望下拉菜单向下打开是合乎逻辑的？我很困惑。所以如果你想澄清的话，请…我应该写“或滚动条”。如果在子菜单打开时查看答案，滚动条将下降。这不是我们想要的菜单效果-我们希望子菜单在滚动条上打开。看到小提琴了吗？它向你展示了。谢谢你的帮助。哦，太糟糕了。这真的不清楚，但现在我明白你的意思了，是的，这在那种情况下没有帮助。祝你好运。谢谢你的努力谢谢，但一件事解决了，另一个问题出现了。在绝对意义上，这并不能解决问题。在相对简单的情况下，它反转问题并向下推菜单。请参阅fiddle。如果您可以使用JQuery，那么修复它将更容易。。再次感谢你的努力。这将适用于一个子菜单，但如果有多个子菜单，则不适用。我已使用更新2更新了答案。你也可以检查它是否很棒-谢谢你在这方面的帮助。