问题描述
我正在学习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.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以及下载解释和应用CSS的时间。
根据计算机的速度,用户可能会看到也可能不会看到您所描述的同一工件。