导航列表子项在悬停时强制向下父列表

Posted 2023-04-13

【中文标题】导航列表子项在悬停时强制向下父列表

【英文标题】：nav list children forcing down parent list on hover

【发布时间】：2020-07-27 06:58:48

【问题描述】：

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

【问题讨论】：

欢迎。请在此处发布您的代码。在 SO 上是必需的。

【参考方案1】：

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

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

【参考方案2】：

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

正在下拉的元素。

【讨论】：

这行得通，但是现在子列表在页面加载时展开。