css - 如何在不占用下方空间的情况下创建可悬停的下拉菜单？

Question

由于 display: block 不适用于过渡，我只是在这里找到了一些解决方案，比如同时使用不透明度和可见性以及将不透明度从 0 设置为 1，但这种方式会占用菜单下的空间.

这是代码:

.menu {
    position: relative;
    display: inline-block;
}

.sub-menu {
    position: absolute;  
    visibility: none; 
    opacity: 0;
}

.menu:hover .sub-menu {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.4s linear;
}

如何修改此代码以在没有子菜单处于事件状态时节省菜单下的空间？？？

如果可能的话，我更喜欢带有 display:block; 的!!

Answer 1

你实际上快到了。 visibility: none 应该是 visibility: hidden。这使得该元素不可点击且不可悬停……直到您将鼠标悬停在父 .menu 元素上。

演示:

.menu {
    position: relative;
    display: inline-block;
    background: powderblue; /* colors for clarity */
}

.menu .sub-menu {
    position: absolute; 
    visibility: hidden; 
    opacity: 0;
    background: lightskyblue;
    transition: opacity 0.5s linear; /* good practice to put this here */
}

.menu:hover .sub-menu {
    visibility: visible;
    opacity: 1;
}

<div class="menu">
<div>Hover Over Me</div>
  <div class="sub-menu">
  <ul>
    <li>Item One</li>
    <li>Item Two</li>
  </ul>
  </div>
</div>
<p>Some content that isn't supposed to move</p>

作为介绍的进一步说明，您不能为 display:block 设置动画，但您绝对可以切换 :hover 伪类的属性值:

.sub-menu {
    opacity: 0;
    display: none;
}

.menu:hover .sub-menu {
    display: block;
    opacity: 1;
}

但是......如果你这样做，你的过渡淡入将不再起作用。当您想使用过渡时，切换 visibility 是更好的选择。

无论哪种方式都不会在菜单下方插入任何空间(您的代码已经使用 position:absolute 实现了这一点)。

更新:

由于您的评论说您需要在隐藏菜单上使用 display: none，您可以使用显示开关并使用 animation 属性而不是 更改不透明度>过渡。

.menu .sub-menu {
    position: absolute; 
    display: none; 
    opacity: 0;
}

.menu:hover .sub-menu {
    display: block;
    animation: reveal 0.4s linear;
    opacity: 1;
    /* be sure declare the final opacity like this, or else it'll revert to 0 after the animation completes */
}

@keyframes reveal {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

您可以完全删除 visibility 属性，因为它在这里什么都不做。