更正菜单悬停显示

Correct a menu hover display

本文关键字：显示 悬停 菜单      更新时间：2023-09-26

我有一个网站，其中有一个菜单，当你悬停它时，它会打开一个子菜单。但它有一个小问题：子菜单是显示它的菜单项下的几个像素。

以下是网站：https://www.redlineaviation.com/

问题是，当您悬停"您有什么类型的飞机？"并尝试选择一个项目时，如果您快速移动鼠标，则没有问题，但如果您稍微慢一点，则会看到问题。

菜单位于父li下方固定数量的像素处。

因为有一个微小的间隙，所以当您"悬停"在间隙上时，悬停状态将被删除。

只需将top位置从固定值更改为100%

.menu li:hover ul, .menu li.sfHover ul {
left: 0;
top: 100%; /* always in place regardless of parent height */
z-index: 9;
}

由于在:hover上显示子菜单，您应该注意菜单和子菜单之间的间隙，因为很明显，当鼠标光标进入间隙时，菜单不再处于:hover状态，子菜单将隐藏。它很容易修复。稍微降低top的位置以消除间隙，但用填充顶部形成视觉上的"新"间隙：

.menu li:hover ul, .menu li.sfHover ul {
    left: 0;
    top: 28px;        /* make top smaller to remove the gap */
    z-index: 9;
    padding-top: 8px; /* and make gap again with padding-top */
}

UPD：正如@Paulie_D所指出的，将顶部位置设置为100%更有意义，没有神奇的数字。然而，为了在菜单和子菜单之间留出一个良好的空间，需要在顶部填充。因此，两个答案的结合使其成为理想：）

相关文章：