javascript - CSS:导航栏在稳定之前跳来跳去

Question

首先导航到我的网站:www.parish.nl

当您使用 FF 单击主菜单时，菜单功能非常好。

但是，当您对 chrome 或 IE 11 执行相同操作时，您会注意到主菜单的元素会暂时聚集并向左闪烁，然后再转到正确的位置。

更奇怪的是，如果我强制 IE 和 chrome 始终访问服务器而不使用缓存，那就完美了。好的，所以我清除了 chrome 和 IE 的缓存，然后重新加载。当运行本地版本的 css 和 js 时，菜单再次闪烁，几乎就像本地运行速度如此之快，以至于它在 css catch 之前渲染导航元素。但是通过在服务器外运行，事情变慢到足以消除闪烁——当然这个理论一定是胡说八道，对吧？但是为什么在 FF 上可以呢？

如果您查看页面的源代码，您会发现我首先从 CDN 加载了 js，然后，我也从 CDN 加载了 Bootstrap，然后是我的本地 css。

有什么建议吗？我可以做些什么来解决问题？

非常感谢!

Answer 1

我认为这可能是因为您的下拉菜单元素在 bootstap 运行之前不会被隐藏。在这一点上，嵌套的 UL 被赋予一个新的类名，它有一个 CSS 规则来隐藏它们。尝试将这个简单的规则添加到您的本地 CSS 文件中:

#menu ul.dropdown{
  display: none;
}