Question

我正在学习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>

Answer 1

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

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

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

1 个答案: