javascript - overflow hidden 的导航，但仍显示下拉菜单

Question

我的网站需要“双”导航栏。我想在空间内显示事件导航，隐藏非事件导航，并在用户选择切换时为新导航栏设置动画。

我这里有一个 JSfiddle 来帮助可视化问题:https://jsfiddle.net/j8wyeazv/7/

请注意，我的下拉列表确实比容器向左延伸得更远，所以 overflow-x 不是一个选项。

编辑:我应该提一下，下拉菜单在 JSFiddle 中已经被简化，实际的下拉菜单将是多列链接，并且将比“父”链接向左和向右延伸得更远。

Answer 1

我的代码需要如何构建，我可能已经提出了不可能(没有更多 JS)。我最终只是解决了没有溢出的问题，只是在不活动时将元素的 opacity 淡化为 0。

更新 fiddle :https://jsfiddle.net/j8wyeazv/8/

感谢 Roko C. Buljan 和 cespon 的两个出色解决方案。这两种解决方案都可能适用于不同的要求，因此我鼓励其他人看看这些解决方案!