Question

所以我的网站有一个非常基本的导航栏，你点击这个单词就会把你带到那个页面。在我的页面上下拉后，导航菜单突然停止工作。任何人都可以在这里看到我遗漏的问题，导致菜单在下拉菜单出现后突然停止工作？

＆＃13;

<!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>

＆＃13;

Answer 1

这是因为您的下拉列表已z-index:999。即使它淡出，它仍然位于导航栏的顶部，具有0不透明度。在welcome-fadeout中，将z-index设为-1，以便导航栏位于横幅顶部

<!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>

Answer 2

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

to {
opacity: 0;
visibility:hidden;
}

导航栏失败

3 个答案: