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

有个问题。当我在移动视图中调用导航菜单时，当我希望它从导航栏下下拉时，它会从页面顶部下拉。 之前，我对两个相邻块使用了z索引：

标题

和

导航

。但是现在在这个项目中，两个块的背景都是透明的，所以z-index不能像我想的那样工作。那么，也许还有其他黑客可以帮助解决这个问题？

---

对于这个问题，我找到了解决办法。对于这种情况，我们最好使用高度过渡，而不是余量。 我们为

导航

类添加了这些道具

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

以及以下用于

导航的道具处于活动状态

：

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

500px的最大高度是可选的，我只是使用了一个值，我的块永远不会达到。

---

您必须显示详细信息

类徽标，给出z索引：5；而navMobile类给出的z指数为6；通过这些更改，我可以使文本和汉堡包导航位于下拉列表上方，如果汉堡包导航，则仍保留功能。如果我给班级标识任何大于2的z索引，为什么汉堡包图标位于徽标下方？我的意思是，如果logo的z-index大于等于3（当然当navMobile的z-index大于3时），它就变得不可读取了。我想这是codepen的一个缺陷。在本地电脑上一切正常。但这不是重点。我需要的是导航列表显示在徽标栏下（而不是从页面顶部下拉）。正如我在主题中提到的，我以前做过的就是使用z-index进行黑客攻击。但现在背景是透明的。所以hack不适用于casechanage导航类，将边距顶部添加到0em，并将不透明度添加到0，然后在活动类中添加不透明度1。您拥有的边距导致导航顶部从顶部显示