隐藏一个溢出的导航，但仍然显示下拉

Question

我有一个网站，需要一个“双”导航栏。我想在一个空间中显示活动导航，隐藏非活动导航，并在用户选择切换时动画新导航栏。

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

请注意，我的下拉列表确实比容器向左扩展，因此overflow-x不是一个选项。

编辑:我要提到的是，下拉列表已经在JSFiddle中简化了，实际下拉将是多列链接，并且将扩展到比“父”链接更左、右更远的位置。

Answer 1

如何构建我的代码，我可能提出了一个不可能(没有更多的JS)。最后，我只是接受没有溢出，只是在不活动时将元素的opacity淡出为0。

更新小提琴：https://jsfiddle.net/j8wyeazv/8/

感谢来自Roko C. Buljan和cespon的两大解决方案。这两种解决方案都可能在不同的需求下工作，因此我鼓励其他人看看这些解决方案！

Answer 2

将主UL元素设置为overflow:hidden，但当子菜单项出现时让它呼吸高度。

http://jsbin.com/nexugi/1/edit?html,css,js,output

实现你想要的目标的诀窍就是：

position:absolute 在菜单中没有任何元素

否则，溢出 UL菜单将松散高度显示不必要的垂直滚动条(如果设置为overflow-x:hidden)或无(如果设置为overflow:hidden;)。

和我们将永远无法看到子菜单项。

溢出菜单元素→正是我们所需要的。

+-----------------------+
| 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. |

以上只是使用LI作为父元素中的inline-block元素来实现，其中UL父节点上的white-space: nowrap;允许LI子节点水平扩展(不需要包装)。

“但是现在菜单高度太高了！”

没有问题，将<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**to设置为主** UL 元素

+-----------------------+
| HELLO WORLD     <btn> |
+-----------------------+
| LINK1 | LINK2 | LINK3 | 
+-----------------------+
| Lorem ipsum pageus    |
| contentis maximus     |
| stachius overflovius. |
|                       |
|                       |

height菜单列表悬停:显示子菜单设置--它是 to

nav li:hover > ul{ height:auto; }

+-----------------------+
| HELLO WORLD     <btn> |
+-----------------------+
| LINK1 | LINK2 | LINK3 | < ON HOVER : submenu height to auto!
+-------|  SUB1 |-------+
| Lorem |  SUB2 |eus    |
| conten+-------+us     |
| stachius overflovius. |
|                       |
|                       |

http://jsbin.com/nexugi/1/edit?html,css,js,output