Javascript JQuery悬停在下拉菜单上闪烁

我试图在下面的JSFIDLE中的类别之间切换，除了隐藏和显示新内容时会出现闪烁之外，它工作得很好

有办法解决这个问题吗

干杯

//覆盖下拉菜单
var menuItem=$（“.header-categories-item”）；
变量分类下拉列表=$（“.header categories下拉列表”）；
menuItem.hover（函数（）{
$（“主体”）.toggleClass（“覆盖可见”）；
$（this）.children（categoriesDropdown）.toggleClass（“categories dropdown visible”）；
});
。标题类别{
位置：相对位置；
明确：两者皆有；
背景：#fff；
z指数：10；
}
.标题类别列表{
页边距底部：0；
}
.标题类别项目{
显示：内联块；
垂直对齐：顶部；
字母间距：0.2rem；
线高：1；
字体大小：13px；
填充顶部：15px；
垫底：15px；
左侧填充：15px；
右侧填充：15px；
}
.标题类别项目a{
颜色：#000；
}
.标题类别项目块{
显示：块；
填充：0；
边框顶部：1件纯色$黑色；
}
/*覆盖层*/
#场地覆盖{
可见性：隐藏；
不透明度：0；
z指数：5；
位置：固定；
排名：0；
左：0；
宽度：100%；
身高：100%；
背景：#999；
过渡：.25s；
}
.覆盖层可见#现场覆盖层{
能见度：可见；
不透明度：1；
}
/*下拉列表*/
.标题类别下拉列表{
可见性：隐藏；
不透明度：0；
位置：绝对位置；
最高：100%；
左：0；
宽度：100%；
最小高度：300px；
填充：15px0；
背景：#fff；
}
李{
垫底：15px；
左侧填充：15px；
右侧填充：15px；
}
.header-categories-dropdown.categories-dropdown-visible{
能见度：可见；
不透明度：1；
}

HTML














导致此问题的原因是
li
标记.header categories项之间存在间隙，因此每当您将鼠标悬停在该间隙上方时，都会看到flick

您可以通过添加
marginright:-5px至。标题类别项目

如果删除两个
li
-标记之间的空白，闪烁消失。

不过，我不知道如何消除CSS中的漏洞。通过
margin right:-5px
删除它对我来说似乎不太可靠-可能在不同的浏览器中差距更小或更大

编辑

：您可以设置
字体大小：0ul
上编码>以消除间隙。
//覆盖下拉菜单
var menuItem=$（“.header-categories-item”）；
变量分类下拉列表=$（“.header categories下拉列表”）；
menuItem.hover（函数（）{
$（“主体”）.toggleClass（“覆盖可见”）；
$（this）.children（categoriesDropdown）.toggleClass（“categories dropdown visible”）；
});
。标题类别{
位置：相对位置；
明确：两者皆有；
背景：#fff；
z指数：10；
}
.标题类别列表{
页边距底部：0；
字号：0；
}
.标题类别项目{
显示：内联块；
垂直对齐：顶部；
字母间距：0.2rem；
线高：1；
字体大小：13px；
填充顶部：15px；
垫底：15px；
左侧填充：15px；
右侧填充：15px；
}
.标题类别项目a{
颜色：#000；
}
.标题类别项目块{
显示：块；
填充：0；
边框顶部：1件纯色$黑色；
}
/*覆盖层*/
#场地覆盖{
可见性：隐藏；
不透明度：0；
z指数：5；
位置：固定；
排名：0；
左：0；
宽度：100%；
身高：100%；
背景：#999；
过渡：.25s；
}
.覆盖层可见#现场覆盖层{
能见度：可见；
不透明度：1；
}
/*下拉列表*/
.标题类别下拉列表{
可见性：隐藏；
不透明度：0；
位置：绝对位置；
最高：100%；
左：0；
宽度：100%；
最小高度：300px；
填充：15px0；
背景：#fff；
}
李{
垫底：15px；
左侧填充：15px；
右侧填充：15px；
}
.header-categories-dropdown.categories-dropdown-visible{
能见度：可见；
不透明度：1；
}

HTML














如果我检查源代码，在两个
之间有一个奇怪的
o
。它会将它们分开，当你离开一个
然后移动到下一个
时，会导致闪烁。添加
背景：红色到
li
将使差距变得明显。这是由
li
-tags之间的空白引起的。#site overlay的背景导致闪烁。在一瞬间，背景将变为灰色，而