CSS下拉菜单悬停在页面加载或刷新时闪烁答案

【问题标题】：CSS Drop down menu on hover flickering on page load or refreshCSS下拉菜单悬停在页面加载或刷新时闪烁
【发布时间】：2021-01-06 19:35:14
【问题描述】：

我正在学习 HTML 和 CSS，我正在尝试创建菜单按钮，其中包含悬停时显示的另一个菜单项的下拉列表。它工作正常，但有一件事在我看来是不正确的。事实上，这个下拉菜单会在每次页面重新加载/刷新后显示半秒。有人可以帮忙检查一下，我尝试使用的代码有什么问题吗？

提前非常感谢您。下面是我的 HTML 和 CSS 代码。

body{
  background-color: tomato;
  height: 100vh;
}

.wrapper{
  width: 80%;
  margin: 0 auto;
}

.logo{
  float:left;
  font-family: arial;
}

.logo h2{
  color:#fff;s
}

.menu_button{
  background-color: transparent;
  color:#fff;
  padding:15px;
  font-size:15px;
  cursor: pointer;
  border: 1px solid #fff;
  width: 100px;
}

.right_menu{
  position:relative;
  display: inline-block;
  float: right;
}

.dropdown_menu{
  visibility: hidden;
  text-align: center;
  position: absolute;
  background-color: #f9f9f9;
  width: 100px;
  box-shadow: 0px 8px 16px 0 px rgba(0,0,0,0.2);
  z-index: 1;
  opacity: 0;
  transition: .3s;
}

.dropdown_menu a{
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown_menu a:hover{
    background-color: #000;
    color:#fff;
    transition: .3s;
}

.right_menu:hover .dropdown_menu{
  visibility: visible;
  opacity: 1;
  transition: .4s;
}

<!DOCTYPE html>
<html lang="cs" dir="ltr">
  <head>
    <title>Hello world!</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="resetStyle.css">
  </head>
    <body>

      <div class="wrapper">
        <div class="logo">
          <h2>LOGO</h2>
        </div>

        <div class="right_menu">
          <button class="menu_button">Menu</button>
            <div class="dropdown_menu">
              <a href="index.html">Home</a>
              <a href="#">About us</a>
              <a href="contacts.html">Contacts</a>
            </div>
          </div>
      </div>
    </body>
</html>

【问题讨论】：

我无法在我自己的机器上复制该问题，并且我没有看到代码有任何问题，（除了您的一个样式规则末尾的杂散字符，但这应该不是造成它）。此外，您的代码正在导入一个重置样式表，我不确定它是否是您提交的代码的一部分。（重置可能应该在您的样式之前导入）。为了获得更好的答案，您还应该包括问题出现在哪个浏览器上。
谢谢，很抱歉那行导入重置样式表，它不再是代码的一部分，我的根文件夹中没有重置样式表（它只是代码的旧部分），所以html 中的行目前不应该什么都不做......也很抱歉没有提到浏览器，正如我在下面的评论中提到的，问题只出现在 Chrome 或 Microsoft Edge 中，Firefox 和 IE 不闪烁......
恐怕我能说的唯一有用的事情是当我使用 Chrome、Firefox 和 Safari 在我的 Mac 上重现它时它可以工作，正如我所说，代码对我来说看起来很合理.如果可以的话，我建议您在其他设备上尝试一下。

标签： html css dropdown flicker

【解决方案1】：

您在闪烁时看到的是浏览器下载并呈现 HTML 和下载解释并应用 CSS 之间的时间。

根据他们计算机的速度，用户可能会看到也可能不会看到您描述的相同工件。

【讨论】：

感谢你们俩。我现在正在使用足够快的游戏 PC，因此互联网或 PC 速度应该不是问题。对不起，我忘了说浏览器...实际上，它在 Firefox 和 Internet Explorer 中没有闪烁，并且在 Chrome 或 Microsoft Edge 中显示页面时出现问题。