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;
}