CSS：有没有办法不失去悬停，如果鼠标瞬间消失？

Question

我正在创建一个 megamenu（以 hover 开头），如果鼠标在空白空间上停留片刻，不悬停会很整洁。顶部栏按钮之间有一点空间，将鼠标移动到空区域将放下悬停并完全隐藏 megamenu。

图像中的白色方块是按钮区域。它和浅蓝色下拉区域都显示带有hover 的下拉列表。但是，让这些区域停留片刻（箭头）会导致悬停消失，菜单将隐藏。

如何让菜单重新聚焦而不是隐藏？我尝试过使用transition-delay，但还没有使用，因为菜单适用于display: flex | none。我使用display，因为megamenu 中有四个单独的下拉菜单，但是我应该使用更好的方法吗？

我正在使用 Liferay 7.3.2，如果它有什么不同的话。

---

编辑：我的一些代码：

<ul id="megamenu-top">
    <li class="megamenu-top-item">
        <button class="megamenu-top-button">
            Top button
        </button>
        <ul class="megamenu-dropdown">
            <li class="megamenu-dropdown-item">
                <a href="/link">
                    Link
                </a>
            </li>
        </ul>
    </li>
</ul>

#megamenu-top {
    .megamenu-top-item {
        display: flex;
        width: 20%;
        height: 5rem;
        margin: auto;
        padding: 0 0.5rem;

        .megamenu-top-button {
            width: 100%;
            padding: 5px;
            border-width: 5px 0;
            margin: 1rem auto;
        }

        .megamenu-dropdown {
            display: none;
            width: 100%;
            position: absolute;
            padding: 5rem 5% 7rem;
            margin-top: 5rem;

            .megamenu-dropdown-item {
                width: 20%;
                margin: 1rem 6.66%;
                display: flex;

                a {
                    width: 100%;
                    display: flex;
                    justify-content: center;
                    padding: 1rem;
                }
            }
        }

        &:hover, &:focus-within, &:active {
            .megamenu-dropdown {
                display: flex;
            }
        }
    }
}

Answer 1

就像我之前说的：最简单的方法是在下拉列表中添加伪元素，这将占用按钮和下拉列表之间的空间。因此，当您将鼠标从按钮移动到下拉菜单时，悬停不会丢失。 我添加了背景颜色，以便您了解它的工作原理，只需根据实际偏移调整大小

#megamenu-top .megamenu-top-item {
  display: flex;
  width: 20%;
  height: 5rem;
  margin: auto;
  padding: 0 0.5rem;
}
#megamenu-top .megamenu-top-item .megamenu-top-button {
  width: 100%;
  padding: 5px;
  border-width: 5px 0;
  margin: 1rem auto;
}
#megamenu-top .megamenu-top-item .megamenu-dropdown {
  display: none;
  width: 100%;
  position: absolute;
  padding: 5rem 5% 7rem;
  margin-top: 5rem;
}
#megamenu-top .megamenu-top-item .megamenu-dropdown .megamenu-dropdown-item {
  width: 20%;
  margin: 1rem 6.66%;
  display: flex;
}
#megamenu-top .megamenu-top-item .megamenu-dropdown .megamenu-dropdown-item a {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 1rem;
}
#megamenu-top .megamenu-top-item:hover .megamenu-dropdown, #megamenu-top .megamenu-top-item:focus-within .megamenu-dropdown, #megamenu-top .megamenu-top-item:active .megamenu-dropdown {
  display: flex;
}


/* Added code */
#megamenu-top .megamenu-top-item .megamenu-dropdown {
  background-color: #cecece;
}

/* For demo purposes */
#megamenu-top .megamenu-top-item .megamenu-dropdown {
  margin-top: 7rem;
}

/* Pseudo for dropdown */
#megamenu-top .megamenu-top-item .megamenu-dropdown::before {
  position: absolute;
  content: '';
  left: 0;
  bottom: 100%;
  height: 2rem;
  width: 100%;
  background-color: red;
}

<ul id="megamenu-top">
    <li class="megamenu-top-item">
        <button class="megamenu-top-button">
            Top button
        </button>
        <ul class="megamenu-dropdown">
            <li class="megamenu-dropdown-item">
                <a href="/link">
                    Link
                </a>
            </li>
        </ul>
    </li>
</ul>

Answer 2

您可以尝试在每个按钮周围放置一些透明填充，然后使用它，这样当 div 丢失 hover 时，菜单就会消失。

或者也许将菜单打开时出现的按钮放入它们自己的 div 中，这样当该 div 悬停在上面时，菜单就会保持不变。