所有浏览器的 CSS 菜单闪烁

Question

我的 CSS 菜单中 9 个主要导航项中的前 3 个出现闪烁(没有子菜单)，这种情况出现在 IE、Safari、Firefox 和 Chrome 中，但仅出现在主页上。

具体来说，第一个菜单项“About”闪烁最多，而“Admissions”和“Academics”都闪烁，但不那么明显。

我的想法是有些东西与主页上的菜单有冲突，特别是主页独有的东西，例如我在上方导航中嵌入的 Google 搜索(并尝试尽可能不显眼地设置样式)，或 jQuery 幻灯片。

我已经尝试了这里建议的几种解决方案来解决 webkit 中的闪烁问题，但都没有解决问题。

Answer 1

看起来是因为你的下拉菜单太宽了。因此，将鼠标悬停在导航项上会显示它们，这会立即导致鼠标位于它们上方而不是导航项上……导致它们再次被隐藏。因此闪烁(我认为!)。

这不会发生在右侧的导航项上，因为它们足够短，因此在“隐藏”时不会覆盖导航链接。

宽度见下图。

将 css 更改为具有 -800px 的较大顶部值，如下所示可能会有所帮助:

.dropdownContain {
  width: 160px;
  position: absolute;
  z-index: 2;
  left: 50%;
  margin-left: -80px; /* half of width */
  top: -800px;
}