html - 隐藏元素仍然占用下拉导航空间

Question

我在创建导航菜单时遇到了一些问题。我正在使用 scaleY 和 transition 的组合，以便在鼠标悬停时顺利打开下拉菜单。但是，目前下 zipper 接目前仍在屏幕上占用空间(请参阅代码段)，而不是仅在父链接悬停时才这样做。

我尝试在相关元素中添加display:none 和display:block;；这有效，但它消除了 transform 创建的平滑过渡效果。

.site-navigation {
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
}

.menu li {
  display:block;
}

.menu .dropdown:hover > .dropdown-menu {
  visibility:visible;
  transform:scaleY(1);
}

.dropdown-menu {
  transform: scaleY(0);
  transform-origin: top;
  transition: visibility 0.3s ease, transform 0.3s ease;
}

<nav class="site-navigation">
  <ul class="menu">
    <li><a href="">Normal Link</a></li>
    <li class="dropdown"><a href="">Dropdown Link</a>
      <ul class="dropdown-menu">
        <li><a href="">Normal Link</a></li>
        <li><a href="">Normal Link</a></li>
        <li><a href="">Normal Link</a></li>
      </ul>
    </li>
    <li><a href="">Normal Link</a></li>
    <li><a href="">Normal Link</a></li>
  </ul>
</nav>

JSFiddle

Answer 1

这是您的解决方案:

.site-navigation {
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
}

.menu li {
  display:block;
}

.menu .dropdown:hover > .dropdown-menu {
  visibility:visible;
  transform:scaleY(1);
  height: auto;
}

.dropdown-menu {
  height: 0;
  transform: scaleY(0);
  transform-origin: top;
  transition: visibility 0.3s ease, transform 0.3s ease;
}

https://jsfiddle.net/pgurav/zjov0nb1/2/