Why doesn't my dropdown menu work propely when using parallax?

so I'm working on a new parallax webpage for a school project. Now when I hover over my dropdown nav menu, the menu get's really dark and unreadable. And also I can't hover over my dropdown menu anymore because it disappears. I changed the z-index to a higher value but that doens't seem to work. Does anyone know how I could fix this?

[

body, html {

    background-size: cover; 

    font-style: normal;

    font-family: "Lato";

    font-size-adjust: initial;

    font-weight: 400;

    line-height: 1,8em;

    color: #666;

    height: 100%;

    margin:0;



}





nav {

    width: 100%;

    height: 50px;

    background:rgba(0,0,0, .8);

    min-width: 1200px; 

}

 

nav ul {

    margin: 0px;

    padding: 0px;

    list-style: none; 

}



nav ul li {

    float: left;

    width: 210px; 

    height: 50px; 

    opacity: 0.8; 

    line-height: 50px; 

    text-align: center; 

    font-size: 20px; 

}

nav ul li a {

    text-decoration: none; 

    color: white;

    display: block; 

    z-index: 1; 

}



nav ul li a:hover {

    background-color: skyblue; 



}



nav ul li ul li {

    display: none; 



}



nav ul li:hover ul li {

    display: block; 

    background: black;

    z-index: 99;

    position: relative;

}



.pimg1, .pimg2, .pimg3{

    position:relative;

    opacity: 0.95;

    background-position: center; 

    background-size: cover;

    background-repeat:no-repeat;



    background-attachment:fixed;

}



.pimg1{

 background-image:url(WallFon.com_11296.jpg);

 min-height: 400px;

}



.pimg2{

    background-image:url(isp.jpg);

    min-height: 400px;

}



.pimg3{

    background-image:url(30714.jpg);

    min-height: 400px;

}



.section-dark{

    text-align:center;

    padding:35px 80px;

}



.section-light{

    text-align:center;

    padding:35px 80px;

}



.section-light{

    background-color:#282e34;

    color:#ddd;

}



.section-dark{

    background-color:#282e34;

    color:#ddd;

}



.ptext{

    position:absolute;

    top:50%;

    width:100%;

    text-align: center;

    color: lightgray;

    font-size:27px; 

    letter-spacing:6px; 

    text-transform:uppercase;

}



.ptext .border{

    background-color:#111;

    color:white; 

    padding:20px; 

}



.ptext .border .trans{

    background-color: transparent;

}

<!DOCTYPE HTML>

<html> 

    <head>

        <link href="style.css" type="text/css" rel="stylesheet"/> 

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <title>Parallax webpagina</title>

    </head>

<body>

    <nav>

        <ul>

         <li><a>Home</a></li>

         <li><a>About us</a></li>

         <li><a>Computers</a>

            <ul>

              <li><a>History of computers</a></li>

              <li><a>Types of computers</a></li>

              

            </ul>

            </li>

          </li>

        <li><a>Building</a>

            <ul>

              <li><a>Recommendation build</a></li>

              <li><a>How to build</a></li>

            </ul>

          </li>

        <li><a>Contact</a></li>

        </ul>

      </nav>



  <div class="pimg1">

   <div class="ptext">

     <span class="border">

       Parallax webpage 

     </span>

    </div> 

  </div>     



     <section class="section-light">

       <h2>Section one</h2>

       <p1>

         Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus deleniti expedita eligendi quos. Autem cum distinctio porro maiores accusamus dignissimos asperiores libero voluptates dolore quaerat qui repudiandae quasi optio ab, accusantium vitae a doloribus earum tenetur animi aliquid delectus modi?

       </p1>

     </section>



     <div class="pimg2">

     <div class="ptext">

       <span class="border trans">

         Two threee

       </span>

      </div> 

    </div>



       <section class="section-dark">

          <h2>Section Two</h2>

          <p1>

            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus deleniti expedita eligendi quos. Autem cum distinctio porro maiores accusamus dignissimos asperiores libero voluptates dolore quaerat qui repudiandae quasi optio ab, accusantium vitae a doloribus earum tenetur animi aliquid delectus modi?

          </p1>

        </section>    

        

        <div class="pimg3">

        <div class="ptext">

          <span class="border trans">

            Three Section Three

          </span>        

        </div> 

      </div>            



          <section class="section-dark">

              <h2>Section Three</h2>

              <p1>

                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus deleniti expedita eligendi quos. Autem cum distinctio porro maiores accusamus dignissimos asperiores libero voluptates dolore quaerat qui repudiandae quasi optio ab, accusantium vitae a doloribus earum tenetur animi aliquid delectus modi?

              </p1>

            </section>   



          <div class="pimg1">

          <div class="ptext">

             <span class="border">

               webpageee

          </span>

        </div>

      </div>

   </body>

</html>

][1]

Here's picture with the images as background[1]: https://i.stack.imgur.com/tgt0j.png

edited Jan 11 at 19:04

marc_s

574k12811091256

asked Dec 29 '18 at 18:48

Mauritius

add a comment |

[

body, html {

    background-size: cover; 

    font-style: normal;

    font-family: "Lato";

    font-size-adjust: initial;

    font-weight: 400;

    line-height: 1,8em;

    color: #666;

    height: 100%;

    margin:0;



}





nav {

    width: 100%;

    height: 50px;

    background:rgba(0,0,0, .8);

    min-width: 1200px; 

}

 

nav ul {

    margin: 0px;

    padding: 0px;

    list-style: none; 

}



nav ul li {

    float: left;

    width: 210px; 

    height: 50px; 

    opacity: 0.8; 

    line-height: 50px; 

    text-align: center; 

    font-size: 20px; 

}

nav ul li a {

    text-decoration: none; 

    color: white;

    display: block; 

    z-index: 1; 

}



nav ul li a:hover {

    background-color: skyblue; 



}



nav ul li ul li {

    display: none; 



}



nav ul li:hover ul li {

    display: block; 

    background: black;

    z-index: 99;

    position: relative;

}



.pimg1, .pimg2, .pimg3{

    position:relative;

    opacity: 0.95;

    background-position: center; 

    background-size: cover;

    background-repeat:no-repeat;



    background-attachment:fixed;

}



.pimg1{

 background-image:url(WallFon.com_11296.jpg);

 min-height: 400px;

}



.pimg2{

    background-image:url(isp.jpg);

    min-height: 400px;

}



.pimg3{

    background-image:url(30714.jpg);

    min-height: 400px;

}



.section-dark{

    text-align:center;

    padding:35px 80px;

}



.section-light{

    text-align:center;

    padding:35px 80px;

}



.section-light{

    background-color:#282e34;

    color:#ddd;

}



.section-dark{

    background-color:#282e34;

    color:#ddd;

}



.ptext{

    position:absolute;

    top:50%;

    width:100%;

    text-align: center;

    color: lightgray;

    font-size:27px; 

    letter-spacing:6px; 

    text-transform:uppercase;

}



.ptext .border{

    background-color:#111;

    color:white; 

    padding:20px; 

}



.ptext .border .trans{

    background-color: transparent;

}

<!DOCTYPE HTML>

<html> 

    <head>

        <link href="style.css" type="text/css" rel="stylesheet"/> 

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <title>Parallax webpagina</title>

    </head>

<body>

    <nav>

        <ul>

         <li><a>Home</a></li>

         <li><a>About us</a></li>

         <li><a>Computers</a>

            <ul>

              <li><a>History of computers</a></li>

              <li><a>Types of computers</a></li>

              

            </ul>

            </li>

          </li>

        <li><a>Building</a>

            <ul>

              <li><a>Recommendation build</a></li>

              <li><a>How to build</a></li>

            </ul>

          </li>

        <li><a>Contact</a></li>

        </ul>

      </nav>



  <div class="pimg1">

   <div class="ptext">

     <span class="border">

       Parallax webpage 

     </span>

    </div> 

  </div>     



     <section class="section-light">

       <h2>Section one</h2>

       <p1>

         Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus deleniti expedita eligendi quos. Autem cum distinctio porro maiores accusamus dignissimos asperiores libero voluptates dolore quaerat qui repudiandae quasi optio ab, accusantium vitae a doloribus earum tenetur animi aliquid delectus modi?

       </p1>

     </section>



     <div class="pimg2">

     <div class="ptext">

       <span class="border trans">

         Two threee

       </span>

      </div> 

    </div>



       <section class="section-dark">

          <h2>Section Two</h2>

          <p1>

            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus deleniti expedita eligendi quos. Autem cum distinctio porro maiores accusamus dignissimos asperiores libero voluptates dolore quaerat qui repudiandae quasi optio ab, accusantium vitae a doloribus earum tenetur animi aliquid delectus modi?

          </p1>

        </section>    

        

        <div class="pimg3">

        <div class="ptext">

          <span class="border trans">

            Three Section Three

          </span>        

        </div> 

      </div>            



          <section class="section-dark">

              <h2>Section Three</h2>

              <p1>

                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus deleniti expedita eligendi quos. Autem cum distinctio porro maiores accusamus dignissimos asperiores libero voluptates dolore quaerat qui repudiandae quasi optio ab, accusantium vitae a doloribus earum tenetur animi aliquid delectus modi?

              </p1>

            </section>   



          <div class="pimg1">

          <div class="ptext">

             <span class="border">

               webpageee

          </span>

        </div>

      </div>

   </body>

</html>

][1]

Here's picture with the images as background[1]: https://i.stack.imgur.com/tgt0j.png

edited Jan 11 at 19:04

marc_s

574k12811091256

asked Dec 29 '18 at 18:48

Mauritius

add a comment |

[

body, html {

    background-size: cover; 

    font-style: normal;

    font-family: "Lato";

    font-size-adjust: initial;

    font-weight: 400;

    line-height: 1,8em;

    color: #666;

    height: 100%;

    margin:0;



}





nav {

    width: 100%;

    height: 50px;

    background:rgba(0,0,0, .8);

    min-width: 1200px; 

}

 

nav ul {

    margin: 0px;

    padding: 0px;

    list-style: none; 

}



nav ul li {

    float: left;

    width: 210px; 

    height: 50px; 

    opacity: 0.8; 

    line-height: 50px; 

    text-align: center; 

    font-size: 20px; 

}

nav ul li a {

    text-decoration: none; 

    color: white;

    display: block; 

    z-index: 1; 

}



nav ul li a:hover {

    background-color: skyblue; 



}



nav ul li ul li {

    display: none; 



}



nav ul li:hover ul li {

    display: block; 

    background: black;

    z-index: 99;

    position: relative;

}



.pimg1, .pimg2, .pimg3{

    position:relative;

    opacity: 0.95;

    background-position: center; 

    background-size: cover;

    background-repeat:no-repeat;



    background-attachment:fixed;

}



.pimg1{

 background-image:url(WallFon.com_11296.jpg);

 min-height: 400px;

}



.pimg2{

    background-image:url(isp.jpg);

    min-height: 400px;

}



.pimg3{

    background-image:url(30714.jpg);

    min-height: 400px;

}



.section-dark{

    text-align:center;

    padding:35px 80px;

}



.section-light{

    text-align:center;

    padding:35px 80px;

}



.section-light{

    background-color:#282e34;

    color:#ddd;

}



.section-dark{

    background-color:#282e34;

    color:#ddd;

}



.ptext{

    position:absolute;

    top:50%;

    width:100%;

    text-align: center;

    color: lightgray;

    font-size:27px; 

    letter-spacing:6px; 

    text-transform:uppercase;

}



.ptext .border{

    background-color:#111;

    color:white; 

    padding:20px; 

}



.ptext .border .trans{

    background-color: transparent;

}

<!DOCTYPE HTML>

<html> 

    <head>

        <link href="style.css" type="text/css" rel="stylesheet"/> 

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <title>Parallax webpagina</title>

    </head>

<body>

    <nav>

        <ul>

         <li><a>Home</a></li>

         <li><a>About us</a></li>

         <li><a>Computers</a>

            <ul>

              <li><a>History of computers</a></li>

              <li><a>Types of computers</a></li>

              

            </ul>

            </li>

          </li>

        <li><a>Building</a>

            <ul>

              <li><a>Recommendation build</a></li>

              <li><a>How to build</a></li>

            </ul>

          </li>

        <li><a>Contact</a></li>

        </ul>

      </nav>



  <div class="pimg1">

   <div class="ptext">

     <span class="border">

       Parallax webpage 

     </span>

    </div> 

  </div>     



     <section class="section-light">

       <h2>Section one</h2>

       <p1>

         Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus deleniti expedita eligendi quos. Autem cum distinctio porro maiores accusamus dignissimos asperiores libero voluptates dolore quaerat qui repudiandae quasi optio ab, accusantium vitae a doloribus earum tenetur animi aliquid delectus modi?

       </p1>

     </section>



     <div class="pimg2">

     <div class="ptext">

       <span class="border trans">

         Two threee

       </span>

      </div> 

    </div>



       <section class="section-dark">

          <h2>Section Two</h2>

          <p1>

            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus deleniti expedita eligendi quos. Autem cum distinctio porro maiores accusamus dignissimos asperiores libero voluptates dolore quaerat qui repudiandae quasi optio ab, accusantium vitae a doloribus earum tenetur animi aliquid delectus modi?

          </p1>

        </section>    

        

        <div class="pimg3">

        <div class="ptext">

          <span class="border trans">

            Three Section Three

          </span>        

        </div> 

      </div>            



          <section class="section-dark">

              <h2>Section Three</h2>

              <p1>

                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus deleniti expedita eligendi quos. Autem cum distinctio porro maiores accusamus dignissimos asperiores libero voluptates dolore quaerat qui repudiandae quasi optio ab, accusantium vitae a doloribus earum tenetur animi aliquid delectus modi?

              </p1>

            </section>   



          <div class="pimg1">

          <div class="ptext">

             <span class="border">

               webpageee

          </span>

        </div>

      </div>

   </body>

</html>

][1]

Here's picture with the images as background[1]: https://i.stack.imgur.com/tgt0j.png

edited Jan 11 at 19:04

marc_s

574k12811091256

asked Dec 29 '18 at 18:48

Mauritius

[

body, html {

    background-size: cover; 

    font-style: normal;

    font-family: "Lato";

    font-size-adjust: initial;

    font-weight: 400;

    line-height: 1,8em;

    color: #666;

    height: 100%;

    margin:0;



}





nav {

    width: 100%;

    height: 50px;

    background:rgba(0,0,0, .8);

    min-width: 1200px; 

}

 

nav ul {

    margin: 0px;

    padding: 0px;

    list-style: none; 

}



nav ul li {

    float: left;

    width: 210px; 

    height: 50px; 

    opacity: 0.8; 

    line-height: 50px; 

    text-align: center; 

    font-size: 20px; 

}

nav ul li a {

    text-decoration: none; 

    color: white;

    display: block; 

    z-index: 1; 

}



nav ul li a:hover {

    background-color: skyblue; 



}



nav ul li ul li {

    display: none; 



}



nav ul li:hover ul li {

    display: block; 

    background: black;

    z-index: 99;

    position: relative;

}



.pimg1, .pimg2, .pimg3{

    position:relative;

    opacity: 0.95;

    background-position: center; 

    background-size: cover;

    background-repeat:no-repeat;



    background-attachment:fixed;

}



.pimg1{

 background-image:url(WallFon.com_11296.jpg);

 min-height: 400px;

}



.pimg2{

    background-image:url(isp.jpg);

    min-height: 400px;

}



.pimg3{

    background-image:url(30714.jpg);

    min-height: 400px;

}



.section-dark{

    text-align:center;

    padding:35px 80px;

}



.section-light{

    text-align:center;

    padding:35px 80px;

}



.section-light{

    background-color:#282e34;

    color:#ddd;

}



.section-dark{

    background-color:#282e34;

    color:#ddd;

}



.ptext{

    position:absolute;

    top:50%;

    width:100%;

    text-align: center;

    color: lightgray;

    font-size:27px; 

    letter-spacing:6px; 

    text-transform:uppercase;

}



.ptext .border{

    background-color:#111;

    color:white; 

    padding:20px; 

}



.ptext .border .trans{

    background-color: transparent;

}

<!DOCTYPE HTML>

<html> 

    <head>

        <link href="style.css" type="text/css" rel="stylesheet"/> 

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <title>Parallax webpagina</title>

    </head>

<body>

    <nav>

        <ul>

         <li><a>Home</a></li>

         <li><a>About us</a></li>

         <li><a>Computers</a>

            <ul>

              <li><a>History of computers</a></li>

              <li><a>Types of computers</a></li>

              

            </ul>

            </li>

          </li>

        <li><a>Building</a>

            <ul>

              <li><a>Recommendation build</a></li>

              <li><a>How to build</a></li>

            </ul>

          </li>

        <li><a>Contact</a></li>

        </ul>

      </nav>



  <div class="pimg1">

   <div class="ptext">

     <span class="border">

       Parallax webpage 

     </span>

    </div> 

  </div>     



     <section class="section-light">

       <h2>Section one</h2>

       <p1>

         Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus deleniti expedita eligendi quos. Autem cum distinctio porro maiores accusamus dignissimos asperiores libero voluptates dolore quaerat qui repudiandae quasi optio ab, accusantium vitae a doloribus earum tenetur animi aliquid delectus modi?

       </p1>

     </section>



     <div class="pimg2">

     <div class="ptext">

       <span class="border trans">

         Two threee

       </span>

      </div> 

    </div>



       <section class="section-dark">

          <h2>Section Two</h2>

          <p1>

            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus deleniti expedita eligendi quos. Autem cum distinctio porro maiores accusamus dignissimos asperiores libero voluptates dolore quaerat qui repudiandae quasi optio ab, accusantium vitae a doloribus earum tenetur animi aliquid delectus modi?

          </p1>

        </section>    

        

        <div class="pimg3">

        <div class="ptext">

          <span class="border trans">

            Three Section Three

          </span>        

        </div> 

      </div>            



          <section class="section-dark">

              <h2>Section Three</h2>

              <p1>

                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus deleniti expedita eligendi quos. Autem cum distinctio porro maiores accusamus dignissimos asperiores libero voluptates dolore quaerat qui repudiandae quasi optio ab, accusantium vitae a doloribus earum tenetur animi aliquid delectus modi?

              </p1>

            </section>   



          <div class="pimg1">

          <div class="ptext">

             <span class="border">

               webpageee

          </span>

        </div>

      </div>

   </body>

</html>

][1]

Here's picture with the images as background[1]: https://i.stack.imgur.com/tgt0j.png

body, html {

    background-size: cover; 

    font-style: normal;

    font-family: "Lato";

    font-size-adjust: initial;

    font-weight: 400;

    line-height: 1,8em;

    color: #666;

    height: 100%;

    margin:0;



}





nav {

    width: 100%;

    height: 50px;

    background:rgba(0,0,0, .8);

    min-width: 1200px; 

}

 

nav ul {

    margin: 0px;

    padding: 0px;

    list-style: none; 

}



nav ul li {

    float: left;

    width: 210px; 

    height: 50px; 

    opacity: 0.8; 

    line-height: 50px; 

    text-align: center; 

    font-size: 20px; 

}

nav ul li a {

    text-decoration: none; 

    color: white;

    display: block; 

    z-index: 1; 

}



nav ul li a:hover {

    background-color: skyblue; 



}



nav ul li ul li {

    display: none; 



}



nav ul li:hover ul li {

    display: block; 

    background: black;

    z-index: 99;

    position: relative;

}



.pimg1, .pimg2, .pimg3{

    position:relative;

    opacity: 0.95;

    background-position: center; 

    background-size: cover;

    background-repeat:no-repeat;



    background-attachment:fixed;

}



.pimg1{

 background-image:url(WallFon.com_11296.jpg);

 min-height: 400px;

}



.pimg2{

    background-image:url(isp.jpg);

    min-height: 400px;

}



.pimg3{

    background-image:url(30714.jpg);

    min-height: 400px;

}



.section-dark{

    text-align:center;

    padding:35px 80px;

}



.section-light{

    text-align:center;

    padding:35px 80px;

}



.section-light{

    background-color:#282e34;

    color:#ddd;

}



.section-dark{

    background-color:#282e34;

    color:#ddd;

}



.ptext{

    position:absolute;

    top:50%;

    width:100%;

    text-align: center;

    color: lightgray;

    font-size:27px; 

    letter-spacing:6px; 

    text-transform:uppercase;

}



.ptext .border{

    background-color:#111;

    color:white; 

    padding:20px; 

}



.ptext .border .trans{

    background-color: transparent;

}

<!DOCTYPE HTML>

<html> 

    <head>

        <link href="style.css" type="text/css" rel="stylesheet"/> 

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <title>Parallax webpagina</title>

    </head>

<body>

    <nav>

        <ul>

         <li><a>Home</a></li>

         <li><a>About us</a></li>

         <li><a>Computers</a>

            <ul>

              <li><a>History of computers</a></li>

              <li><a>Types of computers</a></li>

              

            </ul>

            </li>

          </li>

        <li><a>Building</a>

            <ul>

              <li><a>Recommendation build</a></li>

              <li><a>How to build</a></li>

            </ul>

          </li>

        <li><a>Contact</a></li>

        </ul>

      </nav>



  <div class="pimg1">

   <div class="ptext">

     <span class="border">

       Parallax webpage 

     </span>

    </div> 

  </div>     



     <section class="section-light">

       <h2>Section one</h2>

       <p1>

         Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus deleniti expedita eligendi quos. Autem cum distinctio porro maiores accusamus dignissimos asperiores libero voluptates dolore quaerat qui repudiandae quasi optio ab, accusantium vitae a doloribus earum tenetur animi aliquid delectus modi?

       </p1>

     </section>



     <div class="pimg2">

     <div class="ptext">

       <span class="border trans">

         Two threee

       </span>

      </div> 

    </div>



       <section class="section-dark">

          <h2>Section Two</h2>

          <p1>

            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus deleniti expedita eligendi quos. Autem cum distinctio porro maiores accusamus dignissimos asperiores libero voluptates dolore quaerat qui repudiandae quasi optio ab, accusantium vitae a doloribus earum tenetur animi aliquid delectus modi?

          </p1>

        </section>    

        

        <div class="pimg3">

        <div class="ptext">

          <span class="border trans">

            Three Section Three

          </span>        

        </div> 

      </div>            



          <section class="section-dark">

              <h2>Section Three</h2>

              <p1>

                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus deleniti expedita eligendi quos. Autem cum distinctio porro maiores accusamus dignissimos asperiores libero voluptates dolore quaerat qui repudiandae quasi optio ab, accusantium vitae a doloribus earum tenetur animi aliquid delectus modi?

              </p1>

            </section>   



          <div class="pimg1">

          <div class="ptext">

             <span class="border">

               webpageee

          </span>

        </div>

      </div>

   </body>

</html>

body, html {

    background-size: cover; 

    font-style: normal;

    font-family: "Lato";

    font-size-adjust: initial;

    font-weight: 400;

    line-height: 1,8em;

    color: #666;

    height: 100%;

    margin:0;



}





nav {

    width: 100%;

    height: 50px;

    background:rgba(0,0,0, .8);

    min-width: 1200px; 

}

 

nav ul {

    margin: 0px;

    padding: 0px;

    list-style: none; 

}



nav ul li {

    float: left;

    width: 210px; 

    height: 50px; 

    opacity: 0.8; 

    line-height: 50px; 

    text-align: center; 

    font-size: 20px; 

}

nav ul li a {

    text-decoration: none; 

    color: white;

    display: block; 

    z-index: 1; 

}



nav ul li a:hover {

    background-color: skyblue; 



}



nav ul li ul li {

    display: none; 



}



nav ul li:hover ul li {

    display: block; 

    background: black;

    z-index: 99;

    position: relative;

}



.pimg1, .pimg2, .pimg3{

    position:relative;

    opacity: 0.95;

    background-position: center; 

    background-size: cover;

    background-repeat:no-repeat;



    background-attachment:fixed;

}



.pimg1{

 background-image:url(WallFon.com_11296.jpg);

 min-height: 400px;

}



.pimg2{

    background-image:url(isp.jpg);

    min-height: 400px;

}



.pimg3{

    background-image:url(30714.jpg);

    min-height: 400px;

}



.section-dark{

    text-align:center;

    padding:35px 80px;

}



.section-light{

    text-align:center;

    padding:35px 80px;

}



.section-light{

    background-color:#282e34;

    color:#ddd;

}



.section-dark{

    background-color:#282e34;

    color:#ddd;

}



.ptext{

    position:absolute;

    top:50%;

    width:100%;

    text-align: center;

    color: lightgray;

    font-size:27px; 

    letter-spacing:6px; 

    text-transform:uppercase;

}



.ptext .border{

    background-color:#111;

    color:white; 

    padding:20px; 

}



.ptext .border .trans{

    background-color: transparent;

}

<!DOCTYPE HTML>

<html> 

    <head>

        <link href="style.css" type="text/css" rel="stylesheet"/> 

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <title>Parallax webpagina</title>

    </head>

<body>

    <nav>

        <ul>

         <li><a>Home</a></li>

         <li><a>About us</a></li>

         <li><a>Computers</a>

            <ul>

              <li><a>History of computers</a></li>

              <li><a>Types of computers</a></li>

              

            </ul>

            </li>

          </li>

        <li><a>Building</a>

            <ul>

              <li><a>Recommendation build</a></li>

              <li><a>How to build</a></li>

            </ul>

          </li>

        <li><a>Contact</a></li>

        </ul>

      </nav>



  <div class="pimg1">

   <div class="ptext">

     <span class="border">

       Parallax webpage 

     </span>

    </div> 

  </div>     



     <section class="section-light">

       <h2>Section one</h2>

       <p1>

         Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus deleniti expedita eligendi quos. Autem cum distinctio porro maiores accusamus dignissimos asperiores libero voluptates dolore quaerat qui repudiandae quasi optio ab, accusantium vitae a doloribus earum tenetur animi aliquid delectus modi?

       </p1>

     </section>



     <div class="pimg2">

     <div class="ptext">

       <span class="border trans">

         Two threee

       </span>

      </div> 

    </div>



       <section class="section-dark">

          <h2>Section Two</h2>

          <p1>

            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus deleniti expedita eligendi quos. Autem cum distinctio porro maiores accusamus dignissimos asperiores libero voluptates dolore quaerat qui repudiandae quasi optio ab, accusantium vitae a doloribus earum tenetur animi aliquid delectus modi?

          </p1>

        </section>    

        

        <div class="pimg3">

        <div class="ptext">

          <span class="border trans">

            Three Section Three

          </span>        

        </div> 

      </div>            



          <section class="section-dark">

              <h2>Section Three</h2>

              <p1>

                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus deleniti expedita eligendi quos. Autem cum distinctio porro maiores accusamus dignissimos asperiores libero voluptates dolore quaerat qui repudiandae quasi optio ab, accusantium vitae a doloribus earum tenetur animi aliquid delectus modi?

              </p1>

            </section>   



          <div class="pimg1">

          <div class="ptext">

             <span class="border">

               webpageee

          </span>

        </div>

      </div>

   </body>

</html>

html css parallax

edited Jan 11 at 19:04

marc_s

574k12811091256

asked Dec 29 '18 at 18:48

Mauritius

edited Jan 11 at 19:04

marc_s

574k12811091256

asked Dec 29 '18 at 18:48

Mauritius

edited Jan 11 at 19:04

marc_s

574k12811091256

edited Jan 11 at 19:04

marc_s

574k12811091256

edited Jan 11 at 19:04

marc_s

574k12811091256

asked Dec 29 '18 at 18:48

Mauritius

asked Dec 29 '18 at 18:48

Mauritius

asked Dec 29 '18 at 18:48

Mauritius

add a comment |

1 Answer
1

active

oldest

votes

I played a bit with your css. Basically

I lowered the z-index of your .pimg1 to send it behind the navigation dropdown.

Added a dark background to your nav ul li.

Changed your nav ul li a:hover to nav ul li:hover and added cursor: pointer to it.

Changed the nav ul li:hover ul li to nav ul li:hover > ul, nav ul li ul:hover.

I added this summary so it's easier for you to track the changes. Not sure about the colors you wanted but now you can change those appropriately.

body,

html {

  background-size: cover;

  font-style: normal;

  font-family: "Lato";

  font-size-adjust: initial;

  font-weight: 400;

  line-height: 1, 8em;

  color: #666;

  height: 100%;

  margin: 0;

}



nav {

  width: 100%;

  height: 50px;

  background: rgba(0, 0, 0, 0.8);

  min-width: 1200px;

}



nav ul {

  margin: 0px;

  padding: 0px;

  list-style: none;

}



nav ul li {

  float: left;

  width: 210px;

  height: 50px;

  opacity: 0.8;

  line-height: 50px;

  text-align: center;

  font-size: 20px;

  background-color: rgba(0, 0, 0, 0.8);

}

nav ul li a {

  text-decoration: none;

  color: white;

  display: block;

  z-index: 1;

}



nav ul li:hover {

  background-color: skyblue;

  cursor: pointer;

}



nav ul li ul {

  display: none;

}



nav ul li:hover > ul,

nav ul li ul:hover {

  display: block;

  z-index: 99;

  position: relative;

}



.pimg1,

.pimg2,

.pimg3 {

  position: relative;

  opacity: 0.95;

  background-position: center;

  background-size: cover;

  background-repeat: no-repeat;

  background-attachment: fixed;

}



.pimg1 {

  background-image: url(WallFon.com_11296.jpg);

  min-height: 400px;

  z-index: -1;

}



.pimg2 {

  background-image: url(isp.jpg);

  min-height: 400px;

}



.pimg3 {

  background-image: url(30714jpg);

  min-height: 400px;

}



.section-dark {

  text-align: center;

  padding: 35px 80px;

}



.section-light {

  text-align: center;

  padding: 35px 80px;

}



.section-light {

  background-color: #282e34;

  color: #ddd;

}



.section-dark {

  background-color: #282e34;

  color: #ddd;

}



.ptext {

  position: absolute;

  top: 50%;

  width: 100%;

  text-align: center;

  color: lightgray;

  font-size: 27px;

  letter-spacing: 6px;

  text-transform: uppercase;

}



.ptext .border {

  background-color: #111;

  color: white;

  padding: 20px;

}



.ptext .border .trans {

  background-color: transparent;

}

<!DOCTYPE HTML>

<html> 

    <head>

        <link href="style.css" type="text/css" rel="stylesheet"/> 

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <title>Parallax webpagina</title>

    </head>

<body>

    <nav>

        <ul>

         <li><a>Home</a></li>

         <li><a>About us</a></li>

         <li><a>Computers</a>

            <ul>

              <li><a>History of computers</a></li>

              <li><a>Types of computers</a></li>

              

            </ul>

            </li>

          </li>

        <li><a>Building</a>

            <ul>

              <li><a>Recommendation build</a></li>

              <li><a>How to build</a></li>

            </ul>

          </li>

        <li><a>Contact</a></li>

        </ul>

      </nav>



  <div class="pimg1">

   <div class="ptext">

     <span class="border">

       Parallax webpage 

     </span>

    </div> 

  </div>     



     <section class="section-light">

       <h2>Section one</h2>

       <p1>

         Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus deleniti expedita eligendi quos. Autem cum distinctio porro maiores accusamus dignissimos asperiores libero voluptates dolore quaerat qui repudiandae quasi optio ab, accusantium vitae a doloribus earum tenetur animi aliquid delectus modi?

       </p1>

     </section>



     <div class="pimg2">

     <div class="ptext">

       <span class="border trans">

         Two threee

       </span>

      </div> 

    </div>



       <section class="section-dark">

          <h2>Section Two</h2>

          <p1>

            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus deleniti expedita eligendi quos. Autem cum distinctio porro maiores accusamus dignissimos asperiores libero voluptates dolore quaerat qui repudiandae quasi optio ab, accusantium vitae a doloribus earum tenetur animi aliquid delectus modi?

          </p1>

        </section>    

        

        <div class="pimg3">

        <div class="ptext">

          <span class="border trans">

            Three Section Three

          </span>        

        </div> 

      </div>            



          <section class="section-dark">

              <h2>Section Three</h2>

              <p1>

                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus deleniti expedita eligendi quos. Autem cum distinctio porro maiores accusamus dignissimos asperiores libero voluptates dolore quaerat qui repudiandae quasi optio ab, accusantium vitae a doloribus earum tenetur animi aliquid delectus modi?

              </p1>

            </section>   



          <div class="pimg1">

          <div class="ptext">

             <span class="border">

               webpageee

          </span>

        </div>

      </div>

   </body>

</html>

edited Jan 11 at 19:04

marc_s

574k12811091256

answered Dec 29 '18 at 20:06

Vrle

534515

The z-index in the image was indeed the problem, I also didn't know about the cursor attribute, so that's also a nice addition. Thanks!

– Mauritius
Dec 29 '18 at 22:37

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53972414%2fwhy-doesnt-my-dropdown-menu-work-propely-when-using-parallax%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

I played a bit with your css. Basically

I lowered the z-index of your .pimg1 to send it behind the navigation dropdown.

Added a dark background to your nav ul li.

Changed your nav ul li a:hover to nav ul li:hover and added cursor: pointer to it.

Changed the nav ul li:hover ul li to nav ul li:hover > ul, nav ul li ul:hover.

I added this summary so it's easier for you to track the changes. Not sure about the colors you wanted but now you can change those appropriately.

body,

html {

  background-size: cover;

  font-style: normal;

  font-family: "Lato";

  font-size-adjust: initial;

  font-weight: 400;

  line-height: 1, 8em;

  color: #666;

  height: 100%;

  margin: 0;

}



nav {

  width: 100%;

  height: 50px;

  background: rgba(0, 0, 0, 0.8);

  min-width: 1200px;

}



nav ul {

  margin: 0px;

  padding: 0px;

  list-style: none;

}



nav ul li {

  float: left;

  width: 210px;

  height: 50px;

  opacity: 0.8;

  line-height: 50px;

  text-align: center;

  font-size: 20px;

  background-color: rgba(0, 0, 0, 0.8);

}

nav ul li a {

  text-decoration: none;

  color: white;

  display: block;

  z-index: 1;

}



nav ul li:hover {

  background-color: skyblue;

  cursor: pointer;

}



nav ul li ul {

  display: none;

}



nav ul li:hover > ul,

nav ul li ul:hover {

  display: block;

  z-index: 99;

  position: relative;

}



.pimg1,

.pimg2,

.pimg3 {

  position: relative;

  opacity: 0.95;

  background-position: center;

  background-size: cover;

  background-repeat: no-repeat;

  background-attachment: fixed;

}



.pimg1 {

  background-image: url(WallFon.com_11296.jpg);

  min-height: 400px;

  z-index: -1;

}



.pimg2 {

  background-image: url(isp.jpg);

  min-height: 400px;

}



.pimg3 {

  background-image: url(30714jpg);

  min-height: 400px;

}



.section-dark {

  text-align: center;

  padding: 35px 80px;

}



.section-light {

  text-align: center;

  padding: 35px 80px;

}



.section-light {

  background-color: #282e34;

  color: #ddd;

}



.section-dark {

  background-color: #282e34;

  color: #ddd;

}



.ptext {

  position: absolute;

  top: 50%;

  width: 100%;

  text-align: center;

  color: lightgray;

  font-size: 27px;

  letter-spacing: 6px;

  text-transform: uppercase;

}



.ptext .border {

  background-color: #111;

  color: white;

  padding: 20px;

}



.ptext .border .trans {

  background-color: transparent;

}

<!DOCTYPE HTML>

<html> 

    <head>

        <link href="style.css" type="text/css" rel="stylesheet"/> 

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <title>Parallax webpagina</title>

    </head>

<body>

    <nav>

        <ul>

         <li><a>Home</a></li>

         <li><a>About us</a></li>

         <li><a>Computers</a>

            <ul>

              <li><a>History of computers</a></li>

              <li><a>Types of computers</a></li>

              

            </ul>

            </li>

          </li>

        <li><a>Building</a>

            <ul>

              <li><a>Recommendation build</a></li>

              <li><a>How to build</a></li>

            </ul>

          </li>

        <li><a>Contact</a></li>

        </ul>

      </nav>



  <div class="pimg1">

   <div class="ptext">

     <span class="border">

       Parallax webpage 

     </span>

    </div> 

  </div>     



     <section class="section-light">

       <h2>Section one</h2>

       <p1>

         Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus deleniti expedita eligendi quos. Autem cum distinctio porro maiores accusamus dignissimos asperiores libero voluptates dolore quaerat qui repudiandae quasi optio ab, accusantium vitae a doloribus earum tenetur animi aliquid delectus modi?

       </p1>

     </section>



     <div class="pimg2">

     <div class="ptext">

       <span class="border trans">

         Two threee

       </span>

      </div> 

    </div>



       <section class="section-dark">

          <h2>Section Two</h2>

          <p1>

            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus deleniti expedita eligendi quos. Autem cum distinctio porro maiores accusamus dignissimos asperiores libero voluptates dolore quaerat qui repudiandae quasi optio ab, accusantium vitae a doloribus earum tenetur animi aliquid delectus modi?

          </p1>

        </section>    

        

        <div class="pimg3">

        <div class="ptext">

          <span class="border trans">

            Three Section Three

          </span>        

        </div> 

      </div>            



          <section class="section-dark">

              <h2>Section Three</h2>

              <p1>

                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus deleniti expedita eligendi quos. Autem cum distinctio porro maiores accusamus dignissimos asperiores libero voluptates dolore quaerat qui repudiandae quasi optio ab, accusantium vitae a doloribus earum tenetur animi aliquid delectus modi?

              </p1>

            </section>   



          <div class="pimg1">

          <div class="ptext">

             <span class="border">

               webpageee

          </span>

        </div>

      </div>

   </body>

</html>

edited Jan 11 at 19:04

marc_s

574k12811091256

answered Dec 29 '18 at 20:06

Vrle

534515

The z-index in the image was indeed the problem, I also didn't know about the cursor attribute, so that's also a nice addition. Thanks!

– Mauritius
Dec 29 '18 at 22:37

add a comment |

I played a bit with your css. Basically

I lowered the z-index of your .pimg1 to send it behind the navigation dropdown.

Added a dark background to your nav ul li.

Changed your nav ul li a:hover to nav ul li:hover and added cursor: pointer to it.

Changed the nav ul li:hover ul li to nav ul li:hover > ul, nav ul li ul:hover.

I added this summary so it's easier for you to track the changes. Not sure about the colors you wanted but now you can change those appropriately.

body,

html {

  background-size: cover;

  font-style: normal;

  font-family: "Lato";

  font-size-adjust: initial;

  font-weight: 400;

  line-height: 1, 8em;

  color: #666;

  height: 100%;

  margin: 0;

}



nav {

  width: 100%;

  height: 50px;

  background: rgba(0, 0, 0, 0.8);

  min-width: 1200px;

}



nav ul {

  margin: 0px;

  padding: 0px;

  list-style: none;

}



nav ul li {

  float: left;

  width: 210px;

  height: 50px;

  opacity: 0.8;

  line-height: 50px;

  text-align: center;

  font-size: 20px;

  background-color: rgba(0, 0, 0, 0.8);

}

nav ul li a {

  text-decoration: none;

  color: white;

  display: block;

  z-index: 1;

}



nav ul li:hover {

  background-color: skyblue;

  cursor: pointer;

}



nav ul li ul {

  display: none;

}



nav ul li:hover > ul,

nav ul li ul:hover {

  display: block;

  z-index: 99;

  position: relative;

}



.pimg1,

.pimg2,

.pimg3 {

  position: relative;

  opacity: 0.95;

  background-position: center;

  background-size: cover;

  background-repeat: no-repeat;

  background-attachment: fixed;

}



.pimg1 {

  background-image: url(WallFon.com_11296.jpg);

  min-height: 400px;

  z-index: -1;

}



.pimg2 {

  background-image: url(isp.jpg);

  min-height: 400px;

}



.pimg3 {

  background-image: url(30714jpg);

  min-height: 400px;

}



.section-dark {

  text-align: center;

  padding: 35px 80px;

}



.section-light {

  text-align: center;

  padding: 35px 80px;

}



.section-light {

  background-color: #282e34;

  color: #ddd;

}



.section-dark {

  background-color: #282e34;

  color: #ddd;

}



.ptext {

  position: absolute;

  top: 50%;

  width: 100%;

  text-align: center;

  color: lightgray;

  font-size: 27px;

  letter-spacing: 6px;

  text-transform: uppercase;

}



.ptext .border {

  background-color: #111;

  color: white;

  padding: 20px;

}



.ptext .border .trans {

  background-color: transparent;

}

<!DOCTYPE HTML>

<html> 

    <head>

        <link href="style.css" type="text/css" rel="stylesheet"/> 

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <title>Parallax webpagina</title>

    </head>

<body>

    <nav>

        <ul>

         <li><a>Home</a></li>

         <li><a>About us</a></li>

         <li><a>Computers</a>

            <ul>

              <li><a>History of computers</a></li>

              <li><a>Types of computers</a></li>

              

            </ul>

            </li>

          </li>

        <li><a>Building</a>

            <ul>

              <li><a>Recommendation build</a></li>

              <li><a>How to build</a></li>

            </ul>

          </li>

        <li><a>Contact</a></li>

        </ul>

      </nav>



  <div class="pimg1">

   <div class="ptext">

     <span class="border">

       Parallax webpage 

     </span>

    </div> 

  </div>     



     <section class="section-light">

       <h2>Section one</h2>

       <p1>

         Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus deleniti expedita eligendi quos. Autem cum distinctio porro maiores accusamus dignissimos asperiores libero voluptates dolore quaerat qui repudiandae quasi optio ab, accusantium vitae a doloribus earum tenetur animi aliquid delectus modi?

       </p1>

     </section>



     <div class="pimg2">

     <div class="ptext">

       <span class="border trans">

         Two threee

       </span>

      </div> 

    </div>



       <section class="section-dark">

          <h2>Section Two</h2>

          <p1>

            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus deleniti expedita eligendi quos. Autem cum distinctio porro maiores accusamus dignissimos asperiores libero voluptates dolore quaerat qui repudiandae quasi optio ab, accusantium vitae a doloribus earum tenetur animi aliquid delectus modi?

          </p1>

        </section>    

        

        <div class="pimg3">

        <div class="ptext">

          <span class="border trans">

            Three Section Three

          </span>        

        </div> 

      </div>            



          <section class="section-dark">

              <h2>Section Three</h2>

              <p1>

                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus deleniti expedita eligendi quos. Autem cum distinctio porro maiores accusamus dignissimos asperiores libero voluptates dolore quaerat qui repudiandae quasi optio ab, accusantium vitae a doloribus earum tenetur animi aliquid delectus modi?

              </p1>

            </section>   



          <div class="pimg1">

          <div class="ptext">

             <span class="border">

               webpageee

          </span>

        </div>

      </div>

   </body>

</html>

edited Jan 11 at 19:04

marc_s

574k12811091256

answered Dec 29 '18 at 20:06

Vrle

534515

The z-index in the image was indeed the problem, I also didn't know about the cursor attribute, so that's also a nice addition. Thanks!

– Mauritius
Dec 29 '18 at 22:37

add a comment |

I played a bit with your css. Basically

I lowered the z-index of your .pimg1 to send it behind the navigation dropdown.

Added a dark background to your nav ul li.

Changed your nav ul li a:hover to nav ul li:hover and added cursor: pointer to it.

Changed the nav ul li:hover ul li to nav ul li:hover > ul, nav ul li ul:hover.

I added this summary so it's easier for you to track the changes. Not sure about the colors you wanted but now you can change those appropriately.

body,

html {

  background-size: cover;

  font-style: normal;

  font-family: "Lato";

  font-size-adjust: initial;

  font-weight: 400;

  line-height: 1, 8em;

  color: #666;

  height: 100%;

  margin: 0;

}



nav {

  width: 100%;

  height: 50px;

  background: rgba(0, 0, 0, 0.8);

  min-width: 1200px;

}



nav ul {

  margin: 0px;

  padding: 0px;

  list-style: none;

}



nav ul li {

  float: left;

  width: 210px;

  height: 50px;

  opacity: 0.8;

  line-height: 50px;

  text-align: center;

  font-size: 20px;

  background-color: rgba(0, 0, 0, 0.8);

}

nav ul li a {

  text-decoration: none;

  color: white;

  display: block;

  z-index: 1;

}



nav ul li:hover {

  background-color: skyblue;

  cursor: pointer;

}



nav ul li ul {

  display: none;

}



nav ul li:hover > ul,

nav ul li ul:hover {

  display: block;

  z-index: 99;

  position: relative;

}



.pimg1,

.pimg2,

.pimg3 {

  position: relative;

  opacity: 0.95;

  background-position: center;

  background-size: cover;

  background-repeat: no-repeat;

  background-attachment: fixed;

}



.pimg1 {

  background-image: url(WallFon.com_11296.jpg);

  min-height: 400px;

  z-index: -1;

}



.pimg2 {

  background-image: url(isp.jpg);

  min-height: 400px;

}



.pimg3 {

  background-image: url(30714jpg);

  min-height: 400px;

}



.section-dark {

  text-align: center;

  padding: 35px 80px;

}



.section-light {

  text-align: center;

  padding: 35px 80px;

}



.section-light {

  background-color: #282e34;

  color: #ddd;

}



.section-dark {

  background-color: #282e34;

  color: #ddd;

}



.ptext {

  position: absolute;

  top: 50%;

  width: 100%;

  text-align: center;

  color: lightgray;

  font-size: 27px;

  letter-spacing: 6px;

  text-transform: uppercase;

}



.ptext .border {

  background-color: #111;

  color: white;

  padding: 20px;

}



.ptext .border .trans {

  background-color: transparent;

}

<!DOCTYPE HTML>

<html> 

    <head>

        <link href="style.css" type="text/css" rel="stylesheet"/> 

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <title>Parallax webpagina</title>

    </head>

<body>

    <nav>

        <ul>

         <li><a>Home</a></li>

         <li><a>About us</a></li>

         <li><a>Computers</a>

            <ul>

              <li><a>History of computers</a></li>

              <li><a>Types of computers</a></li>

              

            </ul>

            </li>

          </li>

        <li><a>Building</a>

            <ul>

              <li><a>Recommendation build</a></li>

              <li><a>How to build</a></li>

            </ul>

          </li>

        <li><a>Contact</a></li>

        </ul>

      </nav>



  <div class="pimg1">

   <div class="ptext">

     <span class="border">

       Parallax webpage 

     </span>

    </div> 

  </div>     



     <section class="section-light">

       <h2>Section one</h2>

       <p1>

         Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus deleniti expedita eligendi quos. Autem cum distinctio porro maiores accusamus dignissimos asperiores libero voluptates dolore quaerat qui repudiandae quasi optio ab, accusantium vitae a doloribus earum tenetur animi aliquid delectus modi?

       </p1>

     </section>



     <div class="pimg2">

     <div class="ptext">

       <span class="border trans">

         Two threee

       </span>

      </div> 

    </div>



       <section class="section-dark">

          <h2>Section Two</h2>

          <p1>

            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus deleniti expedita eligendi quos. Autem cum distinctio porro maiores accusamus dignissimos asperiores libero voluptates dolore quaerat qui repudiandae quasi optio ab, accusantium vitae a doloribus earum tenetur animi aliquid delectus modi?

          </p1>

        </section>    

        

        <div class="pimg3">

        <div class="ptext">

          <span class="border trans">

            Three Section Three

          </span>        

        </div> 

      </div>            



          <section class="section-dark">

              <h2>Section Three</h2>

              <p1>

                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus deleniti expedita eligendi quos. Autem cum distinctio porro maiores accusamus dignissimos asperiores libero voluptates dolore quaerat qui repudiandae quasi optio ab, accusantium vitae a doloribus earum tenetur animi aliquid delectus modi?

              </p1>

            </section>   



          <div class="pimg1">

          <div class="ptext">

             <span class="border">

               webpageee

          </span>

        </div>

      </div>

   </body>

</html>

edited Jan 11 at 19:04

marc_s

574k12811091256

answered Dec 29 '18 at 20:06

Vrle

534515

I played a bit with your css. Basically

I lowered the z-index of your .pimg1 to send it behind the navigation dropdown.

Added a dark background to your nav ul li.

Changed your nav ul li a:hover to nav ul li:hover and added cursor: pointer to it.

Changed the nav ul li:hover ul li to nav ul li:hover > ul, nav ul li ul:hover.

I added this summary so it's easier for you to track the changes. Not sure about the colors you wanted but now you can change those appropriately.

body,

html {

  background-size: cover;

  font-style: normal;

  font-family: "Lato";

  font-size-adjust: initial;

  font-weight: 400;

  line-height: 1, 8em;

  color: #666;

  height: 100%;

  margin: 0;

}



nav {

  width: 100%;

  height: 50px;

  background: rgba(0, 0, 0, 0.8);

  min-width: 1200px;

}



nav ul {

  margin: 0px;

  padding: 0px;

  list-style: none;

}



nav ul li {

  float: left;

  width: 210px;

  height: 50px;

  opacity: 0.8;

  line-height: 50px;

  text-align: center;

  font-size: 20px;

  background-color: rgba(0, 0, 0, 0.8);

}

nav ul li a {

  text-decoration: none;

  color: white;

  display: block;

  z-index: 1;

}



nav ul li:hover {

  background-color: skyblue;

  cursor: pointer;

}



nav ul li ul {

  display: none;

}



nav ul li:hover > ul,

nav ul li ul:hover {

  display: block;

  z-index: 99;

  position: relative;

}



.pimg1,

.pimg2,

.pimg3 {

  position: relative;

  opacity: 0.95;

  background-position: center;

  background-size: cover;

  background-repeat: no-repeat;

  background-attachment: fixed;

}



.pimg1 {

  background-image: url(WallFon.com_11296.jpg);

  min-height: 400px;

  z-index: -1;

}



.pimg2 {

  background-image: url(isp.jpg);

  min-height: 400px;

}



.pimg3 {

  background-image: url(30714jpg);

  min-height: 400px;

}



.section-dark {

  text-align: center;

  padding: 35px 80px;

}



.section-light {

  text-align: center;

  padding: 35px 80px;

}



.section-light {

  background-color: #282e34;

  color: #ddd;

}



.section-dark {

  background-color: #282e34;

  color: #ddd;

}



.ptext {

  position: absolute;

  top: 50%;

  width: 100%;

  text-align: center;

  color: lightgray;

  font-size: 27px;

  letter-spacing: 6px;

  text-transform: uppercase;

}



.ptext .border {

  background-color: #111;

  color: white;

  padding: 20px;

}



.ptext .border .trans {

  background-color: transparent;

}

<!DOCTYPE HTML>

<html> 

    <head>

        <link href="style.css" type="text/css" rel="stylesheet"/> 

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <title>Parallax webpagina</title>

    </head>

<body>

    <nav>

        <ul>

         <li><a>Home</a></li>

         <li><a>About us</a></li>

         <li><a>Computers</a>

            <ul>

              <li><a>History of computers</a></li>

              <li><a>Types of computers</a></li>

              

            </ul>

            </li>

          </li>

        <li><a>Building</a>

            <ul>

              <li><a>Recommendation build</a></li>

              <li><a>How to build</a></li>

            </ul>

          </li>

        <li><a>Contact</a></li>

        </ul>

      </nav>



  <div class="pimg1">

   <div class="ptext">

     <span class="border">

       Parallax webpage 

     </span>

    </div> 

  </div>     



     <section class="section-light">

       <h2>Section one</h2>

       <p1>

         Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus deleniti expedita eligendi quos. Autem cum distinctio porro maiores accusamus dignissimos asperiores libero voluptates dolore quaerat qui repudiandae quasi optio ab, accusantium vitae a doloribus earum tenetur animi aliquid delectus modi?

       </p1>

     </section>



     <div class="pimg2">

     <div class="ptext">

       <span class="border trans">

         Two threee

       </span>

      </div> 

    </div>



       <section class="section-dark">

          <h2>Section Two</h2>

          <p1>

            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus deleniti expedita eligendi quos. Autem cum distinctio porro maiores accusamus dignissimos asperiores libero voluptates dolore quaerat qui repudiandae quasi optio ab, accusantium vitae a doloribus earum tenetur animi aliquid delectus modi?

          </p1>

        </section>    

        

        <div class="pimg3">

        <div class="ptext">

          <span class="border trans">

            Three Section Three

          </span>        

        </div> 

      </div>            



          <section class="section-dark">

              <h2>Section Three</h2>

              <p1>

                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus deleniti expedita eligendi quos. Autem cum distinctio porro maiores accusamus dignissimos asperiores libero voluptates dolore quaerat qui repudiandae quasi optio ab, accusantium vitae a doloribus earum tenetur animi aliquid delectus modi?

              </p1>

            </section>   



          <div class="pimg1">

          <div class="ptext">

             <span class="border">

               webpageee

          </span>

        </div>

      </div>

   </body>

</html>

body,

html {

  background-size: cover;

  font-style: normal;

  font-family: "Lato";

  font-size-adjust: initial;

  font-weight: 400;

  line-height: 1, 8em;

  color: #666;

  height: 100%;

  margin: 0;

}



nav {

  width: 100%;

  height: 50px;

  background: rgba(0, 0, 0, 0.8);

  min-width: 1200px;

}



nav ul {

  margin: 0px;

  padding: 0px;

  list-style: none;

}



nav ul li {

  float: left;

  width: 210px;

  height: 50px;

  opacity: 0.8;

  line-height: 50px;

  text-align: center;

  font-size: 20px;

  background-color: rgba(0, 0, 0, 0.8);

}

nav ul li a {

  text-decoration: none;

  color: white;

  display: block;

  z-index: 1;

}



nav ul li:hover {

  background-color: skyblue;

  cursor: pointer;

}



nav ul li ul {

  display: none;

}



nav ul li:hover > ul,

nav ul li ul:hover {

  display: block;

  z-index: 99;

  position: relative;

}



.pimg1,

.pimg2,

.pimg3 {

  position: relative;

  opacity: 0.95;

  background-position: center;

  background-size: cover;

  background-repeat: no-repeat;

  background-attachment: fixed;

}



.pimg1 {

  background-image: url(WallFon.com_11296.jpg);

  min-height: 400px;

  z-index: -1;

}



.pimg2 {

  background-image: url(isp.jpg);

  min-height: 400px;

}



.pimg3 {

  background-image: url(30714jpg);

  min-height: 400px;

}



.section-dark {

  text-align: center;

  padding: 35px 80px;

}



.section-light {

  text-align: center;

  padding: 35px 80px;

}



.section-light {

  background-color: #282e34;

  color: #ddd;

}



.section-dark {

  background-color: #282e34;

  color: #ddd;

}



.ptext {

  position: absolute;

  top: 50%;

  width: 100%;

  text-align: center;

  color: lightgray;

  font-size: 27px;

  letter-spacing: 6px;

  text-transform: uppercase;

}



.ptext .border {

  background-color: #111;

  color: white;

  padding: 20px;

}



.ptext .border .trans {

  background-color: transparent;

}

<!DOCTYPE HTML>

<html> 

    <head>

        <link href="style.css" type="text/css" rel="stylesheet"/> 

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <title>Parallax webpagina</title>

    </head>

<body>

    <nav>

        <ul>

         <li><a>Home</a></li>

         <li><a>About us</a></li>

         <li><a>Computers</a>

            <ul>

              <li><a>History of computers</a></li>

              <li><a>Types of computers</a></li>

              

            </ul>

            </li>

          </li>

        <li><a>Building</a>

            <ul>

              <li><a>Recommendation build</a></li>

              <li><a>How to build</a></li>

            </ul>

          </li>

        <li><a>Contact</a></li>

        </ul>

      </nav>



  <div class="pimg1">

   <div class="ptext">

     <span class="border">

       Parallax webpage 

     </span>

    </div> 

  </div>     



     <section class="section-light">

       <h2>Section one</h2>

       <p1>

         Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus deleniti expedita eligendi quos. Autem cum distinctio porro maiores accusamus dignissimos asperiores libero voluptates dolore quaerat qui repudiandae quasi optio ab, accusantium vitae a doloribus earum tenetur animi aliquid delectus modi?

       </p1>

     </section>



     <div class="pimg2">

     <div class="ptext">

       <span class="border trans">

         Two threee

       </span>

      </div> 

    </div>



       <section class="section-dark">

          <h2>Section Two</h2>

          <p1>

            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus deleniti expedita eligendi quos. Autem cum distinctio porro maiores accusamus dignissimos asperiores libero voluptates dolore quaerat qui repudiandae quasi optio ab, accusantium vitae a doloribus earum tenetur animi aliquid delectus modi?

          </p1>

        </section>    

        

        <div class="pimg3">

        <div class="ptext">

          <span class="border trans">

            Three Section Three

          </span>        

        </div> 

      </div>            



          <section class="section-dark">

              <h2>Section Three</h2>

              <p1>

                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus deleniti expedita eligendi quos. Autem cum distinctio porro maiores accusamus dignissimos asperiores libero voluptates dolore quaerat qui repudiandae quasi optio ab, accusantium vitae a doloribus earum tenetur animi aliquid delectus modi?

              </p1>

            </section>   



          <div class="pimg1">

          <div class="ptext">

             <span class="border">

               webpageee

          </span>

        </div>

      </div>

   </body>

</html>

body,

html {

  background-size: cover;

  font-style: normal;

  font-family: "Lato";

  font-size-adjust: initial;

  font-weight: 400;

  line-height: 1, 8em;

  color: #666;

  height: 100%;

  margin: 0;

}



nav {

  width: 100%;

  height: 50px;

  background: rgba(0, 0, 0, 0.8);

  min-width: 1200px;

}



nav ul {

  margin: 0px;

  padding: 0px;

  list-style: none;

}



nav ul li {

  float: left;

  width: 210px;

  height: 50px;

  opacity: 0.8;

  line-height: 50px;

  text-align: center;

  font-size: 20px;

  background-color: rgba(0, 0, 0, 0.8);

}

nav ul li a {

  text-decoration: none;

  color: white;

  display: block;

  z-index: 1;

}



nav ul li:hover {

  background-color: skyblue;

  cursor: pointer;

}



nav ul li ul {

  display: none;

}



nav ul li:hover > ul,

nav ul li ul:hover {

  display: block;

  z-index: 99;

  position: relative;

}



.pimg1,

.pimg2,

.pimg3 {

  position: relative;

  opacity: 0.95;

  background-position: center;

  background-size: cover;

  background-repeat: no-repeat;

  background-attachment: fixed;

}



.pimg1 {

  background-image: url(WallFon.com_11296.jpg);

  min-height: 400px;

  z-index: -1;

}



.pimg2 {

  background-image: url(isp.jpg);

  min-height: 400px;

}



.pimg3 {

  background-image: url(30714jpg);

  min-height: 400px;

}



.section-dark {

  text-align: center;

  padding: 35px 80px;

}



.section-light {

  text-align: center;

  padding: 35px 80px;

}



.section-light {

  background-color: #282e34;

  color: #ddd;

}



.section-dark {

  background-color: #282e34;

  color: #ddd;

}



.ptext {

  position: absolute;

  top: 50%;

  width: 100%;

  text-align: center;

  color: lightgray;

  font-size: 27px;

  letter-spacing: 6px;

  text-transform: uppercase;

}



.ptext .border {

  background-color: #111;

  color: white;

  padding: 20px;

}



.ptext .border .trans {

  background-color: transparent;

}

<!DOCTYPE HTML>

<html> 

    <head>

        <link href="style.css" type="text/css" rel="stylesheet"/> 

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <title>Parallax webpagina</title>

    </head>

<body>

    <nav>

        <ul>

         <li><a>Home</a></li>

         <li><a>About us</a></li>

         <li><a>Computers</a>

            <ul>

              <li><a>History of computers</a></li>

              <li><a>Types of computers</a></li>

              

            </ul>

            </li>

          </li>

        <li><a>Building</a>

            <ul>

              <li><a>Recommendation build</a></li>

              <li><a>How to build</a></li>

            </ul>

          </li>

        <li><a>Contact</a></li>

        </ul>

      </nav>



  <div class="pimg1">

   <div class="ptext">

     <span class="border">

       Parallax webpage 

     </span>

    </div> 

  </div>     



     <section class="section-light">

       <h2>Section one</h2>

       <p1>

         Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus deleniti expedita eligendi quos. Autem cum distinctio porro maiores accusamus dignissimos asperiores libero voluptates dolore quaerat qui repudiandae quasi optio ab, accusantium vitae a doloribus earum tenetur animi aliquid delectus modi?

       </p1>

     </section>



     <div class="pimg2">

     <div class="ptext">

       <span class="border trans">

         Two threee

       </span>

      </div> 

    </div>



       <section class="section-dark">

          <h2>Section Two</h2>

          <p1>

            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus deleniti expedita eligendi quos. Autem cum distinctio porro maiores accusamus dignissimos asperiores libero voluptates dolore quaerat qui repudiandae quasi optio ab, accusantium vitae a doloribus earum tenetur animi aliquid delectus modi?

          </p1>

        </section>    

        

        <div class="pimg3">

        <div class="ptext">

          <span class="border trans">

            Three Section Three

          </span>        

        </div> 

      </div>            



          <section class="section-dark">

              <h2>Section Three</h2>

              <p1>

                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus deleniti expedita eligendi quos. Autem cum distinctio porro maiores accusamus dignissimos asperiores libero voluptates dolore quaerat qui repudiandae quasi optio ab, accusantium vitae a doloribus earum tenetur animi aliquid delectus modi?

              </p1>

            </section>   



          <div class="pimg1">

          <div class="ptext">

             <span class="border">

               webpageee

          </span>

        </div>

      </div>

   </body>

</html>

edited Jan 11 at 19:04

marc_s

574k12811091256

answered Dec 29 '18 at 20:06

Vrle

534515

edited Jan 11 at 19:04

marc_s

574k12811091256

edited Jan 11 at 19:04

marc_s

574k12811091256

edited Jan 11 at 19:04

marc_s

574k12811091256

answered Dec 29 '18 at 20:06

Vrle

534515

answered Dec 29 '18 at 20:06

Vrle

534515

answered Dec 29 '18 at 20:06

Vrle

534515

The z-index in the image was indeed the problem, I also didn't know about the cursor attribute, so that's also a nice addition. Thanks!

– Mauritius
Dec 29 '18 at 22:37

add a comment |

The z-index in the image was indeed the problem, I also didn't know about the cursor attribute, so that's also a nice addition. Thanks!

– Mauritius
Dec 29 '18 at 22:37

The z-index in the image was indeed the problem, I also didn't know about the cursor attribute, so that's also a nice addition. Thanks!

– Mauritius
Dec 29 '18 at 22:37

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Bdtjtk