下拉菜单不显示在滑块菜单中

Question

我遇到了一个非常烦人的错误，我找不到答案。我有一个菜单滑块，每个项目都有一个下拉菜单。滑块本身是定制的，但下拉功能由 UI-Bootstrap 提供。

这是一个简单的小提琴，我已经制作了更多关于这个问题的信息： https://jsfiddle.net/Lus92rqm/7/

如果您可以在 CSS 选项卡中看到，我添加了一些关于我认为问题出在哪里以及我遇到的可能解决方案的 cmets。因此，基本上，由于.menu-slider-wrapper 附加了overflow: hidden 样式，所有事情都无法正常工作。不过我需要它，因为我想隐藏所有不在可见区域中的项目 - 此容器的 570px 宽度。

我还尝试将position: fixed 添加到.dropdown-menu 类并认为它工作正常，直到我尝试向下滚动页面...显示的菜单正在滚动页面，这不是我的行为我正在寻找。

还有一件事是，我绝对需要将 position: relative 附加到 .menu-slider 类，因为这样我可以将滑块从左向右和相反方向移动 - 更改它的 left 属性。

Sooo，任何人有任何想法我可以设法锻炼这个东西吗？ 谢谢！ :)

Answer 1

您需要使用 dropdown-append-to-body，请参阅文档页面上的 example。