导航列表子级在悬停时强制降低父级列表

Question

我在父 <li> 下方有一个下拉列表。将鼠标悬停在父项 <li> 上时，子项会按预期显示，但父项 <ul> 也会下降，这不是预期的行为。我不知道为什么。 codepen 演示了这个问题。

Answer 1

尝试添加：vertical-align: top; 到正在下降的

个元素中的 css。

Answer 2

当您下拉内部列表时，它会拉伸外部列表项，从而使整个顶级菜单达到该高度。然后，您的顶级列表项会落到该元素的底部。您可以通过以下方式将它们全部置于顶部：

ul.navigation li {
    ...
    vertical-align: top;
}

值得一提的是，仅 CSS 即可完成所有这些行为。这是一个开始：

ul.navigation li ul {
  max-height: 0; 
  opacity: 0;
  transition: all .5s;
}
ul.navigation li:hover ul {
  max-height: 200px;
  opacity: 1; 
}

nav list children forcing down parent list on hover