Question

我有一个网站，其中有一个菜单可以在您悬停时打开子菜单。但它有一点问题：子菜单是显示它的菜单项下的几个像素。

问题是当你悬停＆＃34;你有什么类型的飞机？＆＃34; 并且你尝试选择一个项目，如果你快速移动你的鼠标，那么＆＃39没问题，但是如果你移动它有点慢，那么你就会看到问题。

Answer 1

由于你在:hover上显示子菜单，你应该注意菜单和子菜单之间的差距，因为很明显当鼠标光标进入间隙菜单时，不再处于:hover状态和子菜单隐藏状态。它很容易修复。稍微减少top位置以摆脱差距，但做一个新的＆＃34;新的＆＃34;与填充顶部的差距：

.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%更有意义，没有神奇的数字。但是，需要填充顶部才能在菜单和子菜单之间创建一个漂亮的空间。因此，两个答案的组合使其成为理想的选择：）

Answer 2

菜单位于父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;
}

更正菜单悬停显示

2 个答案: