为什么使用视差时我的下拉菜单无法正常工作？

时间：2018-12-29 18:48:04

标签： html css parallax

所以我正在为学校项目制作新的视差网页。现在，当我将鼠标悬停在下拉导航菜单上时，菜单变得非常暗且不可读。而且我也无法将鼠标悬停在下拉菜单上，因为它消失了。我将z-index更改为更高的值，但这似乎不起作用。有谁知道我该如何解决？

[

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]

这里的图片以图片为背景[1]：https://i.stack.imgur.com/tgt0j.png

1 个答案:

答案 0 :(得分：0)

我玩了你的css。基本上

  1. 我降低了您的.pimg1的Z索引，以将其发送到导航下拉菜单的后面。
  2. 为您的nav ul li添加了深色背景。
  3. 将您的nav ul li a:hover更改为nav ul li:hover，并添加了cursor: pointer。
  4. 将nav ul li:hover ul li更改为nav ul li:hover > ul, nav ul li ul:hover。

我添加了此摘要，以便您更轻松地跟踪更改。不确定您想要的颜色，但是现在您可以适当地更改这些颜色。

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>

相关问题
最新问题