我的网站需要＆＃34; double＆＃34;导航栏。我想在空间中显示活动导航，隐藏非活动导航，并在用户选择切换时为新导航栏设置动画。
我在这里有一个JSfiddle来帮助可视化问题：https://jsfiddle.net/j8wyeazv/7/
请注意，我的下拉菜单确实比容器更靠左，所以overflow-x不是一个选项。
编辑：我应该提一下，JSFiddle中的下拉菜单已经简化了，实际的下拉列表将是多列链接，并且将比'＆34;父＆＃34;进一步向左和向右延伸。链接。
答案 0 :(得分：0)
我的代码需要如何构建，我可能已经不可能（没有更多的JS）。我最终只是解决了没有溢出，只是在非活动时将元素的opacity淡化为0。
更新了小提琴：https://jsfiddle.net/j8wyeazv/8/
感谢Roko C. Buljan和cespon提供的两个很棒的解决方案。这两种解决方案都可能在不同的要求下工作，所以我鼓励其他人看看这些解决方案！
答案 1 :(得分：-1)
将主要UL元素设置为overflow:hidden，但是当子菜单项出现时，让它呼吸高度。
<强> jsBin demo
实现你想要的东西的诀窍很简单：
菜单中没有任何position:absolute元素
否则溢出 UL菜单将松散高度显示不需要的垂直滚动条（如果设置为overflow-x:hidden）或无（如果设置为{ {1}}）
，我们将无法看到子菜单项 。
高度→正是我们需要的：
overflow:hidden;以上简单地使用LI作为父级内的+-----------------------+
| HELLO WORLD <btn> |
+-----------------------+-----------------------+ < NAV containing our UL
| LINK1 | LINK2 | LINK3 | LINK4 | LINK5 | LINK6 |
| | SUB1 | | SUB1 | |
| | SUB2 | +-------+ |
+-------+-------+-------------------------------+ < UL height == tallest submenu
| Lorem ipsum pageus |
| contentis maximus |
| stachius overflovius. |
元素实现，其中UL父级上的inline-block允许LI子级水平扩展（不包装）。
“但现在菜单高度太高了！”
没问题，将white-space: nowrap;父高设置为即：<nav>
height:40px; 几乎就在那里！让我们隐藏子菜单项
将任何+-----------------------+
| HELLO WORLD <btn> |
+-----------------------+-----------------------+ < NAV height : 40px
| LINK1 | LINK2 | LINK3 | LINK4 | LINK5 | LINK6 |
+ | SUB1 | | SUB1 | |
| | SUB2 | +-------+ | < Page content is now underneath!
+-------+-------+-------------------------------+
| stachius overflovius. |
| |
| |
子菜单设置为li > ul将导致：
overflow:hidden and height:0;目前你的窗口应该有水平滚动条，因为列表元素向右延伸太多......
最后将+-----------------------+
| HELLO WORLD <btn> |
+-----------------------+-----------------------+
| LINK1 | LINK2 | LINK3 | LINK4 | LINK5 | LINK6 |
+-----------------------------------------------+ < LI UL submenu to height 0
| Lorem ipsum pageus |
| contentis maximus |
| stachius overflovius. |
| |
| |
设置为主overflow:hidden元素
UL 菜单列表HOVER：显示子菜单设置为+-----------------------+
| HELLO WORLD <btn> |
+-----------------------+
| LINK1 | LINK2 | LINK3 |
+-----------------------+
| Lorem ipsum pageus |
| contentis maximus |
| stachius overflovius. |
| |
| |
至height
auto
nav li:hover > ul{ height:auto; }<强> jsBin demo