0
私はかなり基本的な私のウェブサイト用のナビゲーションバーを持っているので、その言葉をクリックすると、そのページに移動します。よく私のページにドロップダウンを置いた後、ナビゲーションメニューが突然動作を停止しました。誰もがドロップダウンメニューが発生した後にナビゲーションメニューが突然動作を停止することができるように、私は行方不明になっている問題をここで見ることができますか？ナビゲーションバーの失敗
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
.dropdown-notification {
height: 25vh;
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 999;
line-height: 40px;
background-color: #4CAF50;
animation: welcome-dropdown 2s ease, welcome-fadeout 2s 4s forwards;
text-align: center;
vertical-align: middle;
line-height: 25vh;
font-size: 70px;
}
@keyframes welcome-dropdown {
from {
transform: translateY(calc(-100vh));
}
to {
transform: translateY(0);
}
}
@keyframes welcome-fadeout {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
</style>
</head>
<body>
<div class="dropdown-notification text-center">
Welcome to All About History
</div>
<nav>
<ul>
<li><a class="active" href="website.html">Home</a></li>
<li><a href="about.html">About Me</a></li>
<li><a href="people.html">People in History</a></li>
<li><a href="contact.html">Contact Me</a></li>
</ul>
</nav>
</body>
</html>
あなたは 'Zインデックスを持つようにドロップダウンを設定します。999'、それでもこれなしで、ドロップダウンのdivは、ナビゲーション要素の上にあり、それだけで不透明'にフェード：0 'としますそれをクリックすることはできません。 – Matt