导航栏故障

因此，我为我的网站提供了一个非常基本的导航栏，您可以单击该单词，然后将您带到该页面。在放下我的页面上的下拉菜单之后，导航菜单突然停止工作。谁能在这里看到我缺少的问题，允许导航菜单在下拉菜单发生后突然停止工作？

<!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-index:999。即使它逐渐消失，它仍然在导航栏的顶部，并带有0不透明度。在您的welcome-fadeout中，制作z index'-1'，以便nav栏位于横幅上

<!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;
    z-index: -1;
  }
}  
</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>

您还可以使用visibility:hidden属性而不是z-index:-1。它也有效。这只是修复它的另一种方法。

to {
opacity: 0;
visibility:hidden;
}

<!doctype html>
<html>
<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>
<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(0vh);
    }
}
@keyframes welcome-fadeout {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        height: 0vh;
    }
}  
</style>
</body>
</html>

相关内容

最新更新

热门标签：