如何在容器外显示导航栏下拉菜单？

Question

所以在这个问题之前，我一直在努力让导航栏在展开时在较小的屏幕上滚动。所以 link:

使用该问题的答案，我能够使导航栏滚动，但随后我遇到了一个新问题。当点击导航栏时link，弹出的下拉菜单会留在导航栏容器内，导航栏可以滚动。

一张图解释（本例为OLE下拉）：

这是用于使折叠的导航栏可滚动的CSS。

.fixed-top .navbar-collapse {
    max-height: calc(100vh - 4.5em);
    overflow-y: auto;
}

导航栏折叠时没有问题，可以正常显示下拉菜单并滚动。但是，当在大屏幕上不折叠时，如何使下拉菜单显示在导航栏容器之外？

这是我针对这个问题的 JSFiddle：https://jsfiddle.net/suhaib47/7b58o0d3/3/
注意：使结果视口足够宽，以便导航栏可以完全显示。单击 OLE 下拉菜单，您必须向下滚动才能看到下拉菜单。

当我在容器外显示下拉菜单时，菜单无法在较小的屏幕上滚动。当菜单可以滚动时，我无法让下拉菜单显示在导航容器之外。

如何使下拉菜单显示在导航栏容器之外？同时，我希望响应式导航栏在较小的屏幕上展开时可以滚动。

我发现了一个类似的 SO 问题，但无法解决我的问题：

Answer 1

希望无需使用媒体查询即可解决此问题。尽管如此，我确实能够使用媒体查询来解决这个问题。

@media only screen and (max-height: 450px) {
    .fixed-top .navbar-collapse {
        max-height: calc(100vh - 4.5em);
        overflow-y: auto;
    }
}

这种滚动方式在需要时可用，具体取决于显示 size/orientation，即当导航栏菜单折叠时。

如何在容器外显示导航栏下拉菜单？

How to show navbar dropdown menu outside container?

html

css

overflow

twitter-bootstrap

drop-down-menu