导航栏下方的下拉导航菜单

Question

有一个问题。当我在移动视图中调用导航菜单时，当我希望它从导航栏下方下拉时，它会从页面顶部下拉。以前，我将 z-index 用于两个相邻块：header 和 navigation 。但是现在在这个项目中，两个块的背景都是透明的，所以 z-index 只是没有按照我的意思显示工作。所以也许还有其他一些黑客可以帮助解决这个问题？这是该问题的代码笔

Answer 1

我找到了解决方案。我们最好使用高度过渡，然后使用案例的边距。我们为navigation类添加此道具

max-height: 0;
transition: max-height 0.15s ease-out;
overflow: hidden;

以及以下navigation active道具：

max-height: 500px;
transition: max-height 0.5s ease-in;

最大高度的 500px 是可选的，我只是使用我的块永远不会达到的值。您有代码笔来显示详细信息