导航列表子项将鼠标悬停在父项列表上

Question

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

Answer 1

尝试添加：vertical-align: top; o下拉的

元素的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; 
}

Demo