CSS菜单随所有浏览器闪烁

Question

我的CSS菜单中的9个主要导航项目中的前3个（没有子菜单）中出现了闪烁，这种情况发生在IE，Safari，Firefox和Chrome中，但仅限于主页上。

具体来说，第一个菜单项＆＃34;关于＆＃34;闪烁最多，同时＆＃34;招生＆＃34;和＃34;学术＆＃34;闪烁，但不是明显的。

我的想法是，某些内容与主页上的菜单相冲突，特别是主页独有的内容，例如我在上部导航中嵌入的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;
}