为什么我的导航菜单在视差网站中不起作用？

Question

我曾尝试将导航菜单添加到我的视差网站中，但它不起作用，而且我尝试了许多其他方法，但它就是不起作用，所以我决定在这里提问，希望有人能提供帮助。 This is my navigation-menu on a parallax website 下面是我的代码。任何帮助将不胜感激！

body, html{
  height:100%;
  margin:0;
  font-size:16px;
  font-family:"Lato", sans-serif;
  font-weight:400;
  line-height:1.8em;
  color:#666;
}

.pimg1, .pimg2, .pimg3{
  position:relative;
  opacity:0.70;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;

  /*
    fixed = parallax
    scroll = normal
  */
  background-attachment:fixed;
}

.pimg1{
  background-image:url('../img/brownie.jpg');
  min-height:100%;
}

.pimg2{
  background-image:url('../img/image2.jpg');
  min-height:400px;
}

.pimg3{
  background-image:url('../img/image3.jpg');
  min-height:400px;
}

.section{
  text-align:center;
  padding:50px 80px;
}

.section-light{
  background-color:#f4f4f4;
  color:#666;
}

.section-dark{
  background-color:#282e34;
  color:#ddd;
}

.ptext{
  position:absolute;
  top:50%;
  width:100%;
  text-align:center;
  color:#000;
  font-size:27px;
  letter-spacing:8px;
  text-transform:uppercase;
}

.ptext .border{
  background-color:#111;
  color:#fff;
  padding:20px;
}

.ptext .border.trans{
  background-color:transparent;
}

@media(max-width:568px){
  .pimg1, .pimg2, .pimg3{
    background-attachment:scroll;
  }
}

a {
  /* color: white; */
}

header {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0 100px;
  width: 100%;
  box-sizing: border-box;
  background: none;
}

header .logo {
  color: black;
  height: 50px;
  line-height: 50px;
  font-size: 24px;
  float: left;
  font-weight: bold;
}

header nav {
  float: right;
}

header nav ul {
  margin: 0;
  padding: 0;
  display: flex;
}

header nav ul li {
  list-style: none;
  position: relative;
}

header nav ul li.sub-menu:before {
  content: '\f078';
  font-family: fontAwesome;
  position: absolute;
  line-height: 50px;
  color: white;
  right: 1px;
}

header nav ul li.active.sub-menu:before {
  content: '\f077';
}

header nav ul li ul {
  position: absolute;
  left: 0;
  background: inherit;
  display: none
}

header nav ul li.active ul {
  /* use li: hover instead */
  display: block;
}

header nav ul li ul li {
  display: block;
  width: 200px;
}

header nav ul li a {
  height: 50px;
  line-height: 50px;
  padding: 0 20px;
  color: black;
  text-decoration: none;
  display: block;
}

header nav ul li a:hover {
  color: #fff;
  background: grey;
}

header nav ul li a.active {
  background: grey;
}

.menu-toggle {
  color: black;
  float: right;
  line-height: 50px;
  font-size: 24px;
  cursor: pointer;
  display: none
}

@media (max-width: 860px) {
  header {
    padding: 0 20px;
  }
  .menu-toggle {
    display: block;
  }
  header nav {
    /* use display none or left:-100% to hide the nav  */
    /* display: none; */
    position: absolute;
    top: 50px;
    left: -100%;
    width: 100%;
    height: calc(100vh - 50px);
    background: #333;
    transition: 0.5s;
  }
  header nav.active {
    left: 0;
  }
  header nav ul {
    display: block;
    text-align: center;
  }
  header nav ul li a {
    border-bottom: 0.9px solid rgba(0, 0, 0, .2);
  }
  header nav ul li.active ul {
    position: relative;
    background: white;
  }
  header nav ul li ul li {
    width: 100%;
  }
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Parallax Website</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>

  <header>
    <div class="logo">LOGO </div>
    <nav>
      <ul>
        <li class="sub-menu"><a href="#">Services</a>
          <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
            <li><a href="#">Link 4</a></li>
          </ul>
        </li>
        <li><a href="#">Team</a></li>


      </ul>
    </nav>
    <div class="menu-toggle">
      <i class="fa fa-bars" aria-hidden="true"></i>
    </div>
  </header>


  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script type="text/javascript">
    $(document).ready(
      function() {
        $('.menu-toggle').click(function() {
          $('nav').toggleClass('active')
        })

        $('ul li').click(function() {
          $(this).siblings().removeClass('active');
          $(this).toggleClass('active');
        })
      }
    )

  </script>


  <div class="pimg1">
    <div class="ptext">
      <span class="border">
        Cookies
      </span>
    </div>
  </div>

  <section class="section section-light">
    <h2>Section One</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt, laudantium, quibusdam? Nobis, delectus, commodi, fugit amet tempora facere dolores nisi facilis consequatur, odio hic minima nostrum. Perferendis eos earum praesentium, blanditiis sapiente labore aliquam ipsa architecto vitae. Minima soluta temporibus voluptates inventore commodi cumque esse suscipit optio aliquam et, dolorem a cupiditate nihil fuga laboriosam fugiat placeat dignissimos! Unde eveniet placeat quisquam blanditiis voluptatem doloremque fugiat dolor repellendus ratione in. Distinctio provident dolorem modi cumque illo enim quidem tempora deserunt nostrum voluptate labore repellat quisquam quasi cum suscipit dolore ab consequuntur, ad porro earum temporibus. Laborum ad temporibus ex, omnis!
    </p>
  </section>

  <div class="pimg2">
    <div class="ptext">
      <span class="border trans">
        Image Two Text
      </span>
    </div>
  </div>

  <section class="section section-dark">
    <h2>Section Two</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt, laudantium, quibusdam? Nobis, delectus, commodi, fugit amet tempora facere dolores nisi facilis consequatur, odio hic minima nostrum. Perferendis eos earum praesentium, blanditiis sapiente labore aliquam ipsa architecto vitae. Minima soluta temporibus voluptates inventore commodi cumque esse suscipit optio aliquam et, dolorem a cupiditate nihil fuga laboriosam fugiat placeat dignissimos! Unde eveniet placeat quisquam blanditiis voluptatem doloremque fugiat dolor repellendus ratione in.
    </p>
  </section>

  <div class="pimg3">
    <div class="ptext">
      <span class="border trans">
        Image Three Text
      </span>
    </div>
  </div>

  <section class="section section-dark">
    <h2>Section Three</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt, laudantium, quibusdam? Nobis, delectus, commodi, fugit amet tempora facere dolores nisi facilis consequatur, odio hic minima nostrum. Perferendis eos earum praesentium, blanditiis sapiente labore aliquam ipsa architecto vitae. Minima soluta temporibus voluptates inventore commodi cumque esse suscipit optio aliquam et, dolorem a cupiditate nihil fuga laboriosam fugiat placeat dignissimos! Unde eveniet placeat quisquam blanditiis voluptatem doloremque fugiat dolor repellendus ratione in.
    </p>
  </section>

  <div class="pimg1">
    <div class="ptext">
      <span class="border">
        Traversy Media
      </span>
    </div>
  </div>
</body>
</html>

Answer 1

将z-index属性添加到header:

header {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0 100px;
  width: 100%;
  box-sizing: border-box;
  background: none;
  z-index: 1;
}

您的 header 在视差图像后面，因为它具有绝对位置并且您的视差图像遍布整个屏幕。

为什么我的导航菜单在视差网站中不起作用？

Why is my navigation menu not working in parallax website?

html

css

navigation

web

parallax