下拉使下面的滑块向下移动以显示内容

Question

我只是想制作一个下拉菜单。但是我的下拉菜单正在做的是使它下面的幻灯片更加向下。我还附上了 HTML 和 CSS 文件。好让你看看。如果您将运行代码，它不会运行正确，因为没有附加图像。假设下拉按钮下方有一个滑块，每 3 秒包含 5 个图像变化。实际上它需要滑块向下移动才能显示所有内容，但在打开完整的下拉菜单后它仍然只显示其中的 1 link。所以基本上有两个错误，一个是将滑块向下移动，另一个是它没有显示所有内容。我是编码初学者，所以我可能在代码中犯了一些愚蠢的错误。所以只是请求你帮助我。

* {
  margin: 0px;
  overflow-x: hidden;
}

.header {
  width: 100%;
  height: 200px;
  background-color: hotpink;
  position: relative;
  bottom: 30px;
  overflow-y: hidden;
}

.up {
  animation: change 10s linear infinite;
  height: 210px;
  overflow-y: hidden;
}

@keyframes change {
  0% {
    background-color: rgb(255, 200, 145);
  }
  20% {
    background-color: rgb(255, 145, 249);
  }
  40% {
    background-color: aqua;
  }
  60% {
    background-color: rgb(241, 189, 92);
  }
  80% {
    background-color: rgb(170, 255, 0);
  }
  100% {
    background-color: rgb(252, 255, 87);
  }
}

#slider {
  overflow: hidden;
  height: 100%;
  bottom: 30px;
  z-index: 1;
}

#slider figure {
  width: 500%;
  margin: 0;
  left: 0;
  animation: 20s slider infinite;
  z-index: 1;
}

#slider figure img {
  width: 20%;
  float: left;
}

@keyframes slider {
  0% {
    left: 0;
  }
  20% {
    left: 0;
  }
  25% {
    left: -100%;
  }
  45% {
    left: -100%;
  }
  50% {
    left: -200%;
  }
  70% {
    left: -200%;
  }
  75% {
    left: -300%;
  }
  95% {
    left: -300%;
  }
  100% {
    left: -400%;
  }
}

.notice_board {
  width: 600px;
  height: 300px;
  background-color: white;
  border: 10px solid blue;
  position: relative;
  right: 500px;
  color: coral;
}

.integration {
  width: 100%;
  height: 400px;
  background-color: rgb(89, 89, 165);
  position: relative;
  bottom: 400px;
}

.gallery {
  width: 100px;
  height: 80px;
  position: relative;
  right: -20px;
  border-radius: 10px;
  top: 90px;
}

.call {
  width: 150px;
  height: 120px;
  position: relative;
  bottom: 900px;
  border: 10px;
  left: 0px;
}

.contain ul {
  list-style: none;
  margin-top: 40px;
  position: relative;
  bottom: 15px;
  z-index: 99999999999999999;
  overflow-y: hidden;
}

.contain ul li {
  background: cadetblue;
  width: 170px;
  border: 1px solid #fff;
  height: 50px;
  line-height: 50px;
  text-align: center;
  float: left;
  color: #fff;
  font-size: 16px;
  position: relative;
  text-transform: uppercase;
  font-weight: bold;
  z-index: 99999999999999999;
}

.contain ul li:hover {
  background-color: green;
  height: 400px;
  width: 250px;
  z-index: 99999999999999999;
}

.contain ul ul {
  display: none;
  z-index: 99999999999999999;
  height: 50px;
}

.contain ul li:hover>ul {
  display: block;
  z-index: 99999999999999999;
  height: 50px;
}

.contain ul ul ul {
  margin-left: 170px;
  top: 0;
  position: absolute;
  z-index: 99999999999999999;
}

.contain ul li ul li {
  width: 260px;
  height: 450px;
  position: relative;
  right: 40px;
  z-index: 99999999999999999;
}

.contain ul li ul li:hover {
  width: 260px;
  position: relative;
  right: 40px;
  z-index: 99999999999999999;
  height: 50px;
}

 ::-webkit-scrollbar {
  width: 7px;
  background-color: orange;
  height: 20px;
}

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JAYPEE PUBLIC SCHOOL, NOIDA</title>
  <link rel="shortcut icon" href="green-logo.png" type="image/x-icon">
  <link rel="stylesheet" href="style1.css">
</head>

<body>

  <div style="background-color:whitesmoke" class="up">
    <h1 style="position: relative;font-size: 50px;left: 700px;top: 40px;color: blue;"> JAYPEE PUBLIC SCHOOL, NOIDA</h1>
    <h2 style="position: relative;left: 700px;top: 40px;font-size: 20px;"> Affiliated to CBSE (Affiliation No. 2131880, School Code: 60793) </h2>
    <img src="green-logo-removebg-preview.png" alt="green-logo" width="200" height="200" style="position: relative;bottom: 90px;left: 450px;">
  </div>

  <div class="contain">
    <ul>
      <li>HOME
        <ul>
          <li>Welcome Page</li>
          <li>Main Page</li>
        </ul>
      </li>
      <li>ABOUT US
        <ul>
          <li>Our Motto</li>
          <li>Principal's Messgae</li>
          <li>Organization</li>
        </ul>
      </li>
      <li>ADMISSIONS
        <ul>
          <li>Registration</li>
          <li>Subjects</li>
          <li>Fee Structure</li>
        </ul>
      </li>
      <li>Academics
        <ul>
          <li>School Timings</li>
          <li>Faculty</li>
          <li>CBSE</li>
        </ul>
      </li>
      <li>CONTACT US
        <ul>
          <li>+91-995 828 4006</li>
          <li>jpsnoida@jaypeeschools.edu.in</li>
        </ul>
      </li>
    </ul>
  </div>

  <div id="slider">
    <figure>
      <img src="img3.jpg">
      <img src="3.JPG">
      <img src="4.JPG">
      <img src="img3.jpg">
      <img src="9.jpg" alt="">
    </figure>
  </div>

  <img class="gallery" src="Gallery.jpg" alt="Gallery">

  <div class="container_1">
    <h2 style="position: relative;top: 20px;left: 40px;">GALLERY</h2>
  </div>

  <img src="call-icon-vector-noisy-phone-260nw-1499198162-removebg-preview.png" alt="Call" class="call">


  <div class="container_2">
    <h2 style="position: relative;top: 20px;left: 25px; display:none;">CONTACT US</h2>
  </div>


  <center>

    <br><br>

    <h1 style="font-family: Gigi;font-size: 60px;">NOTICE BOARD</h1>

    <br><br><br><br><br><br>

    <div class="notice_board">
      <br><br>

      <h1 style="color: black;">Admissions Opened: </h1>
      <br><br>
      <h1 style="position: relative;top: 50px;">Admissions opened for the Session 2022 - 2023 for classes Pre Nursery to XII.</h1>

    </div>

    <img src="IMG.jpg" width="100" height="100" style="position: relative;top: -370px;left:-280px;">

    <div class="notice_board" style="position: relative;left: 500px;bottom: 420px;border: 10px solid hotpink;">
      <br><br>

      <h1 style="color: black;">Autumn Break: </h1>
      <br><br>
      <h1 style="position: relative;top: 50px;color:rgb(61, 143, 61);">Autumn Break are starting from 13th Oct 2021 till 18th Oct 2021.</h1>

    </div>

    <img src="IMG.jpg" width="100" height="100" style="position: relative;top: -790px;left:720px;">

  </center>


  <div class="integration">

    <h1 style="position:relative;top:50px;left: 100px;color:aqua">Our School is also integrated with..</h1>

    <img src="1.png" alt="" width="200" height="200" style="position: relative;top: 100px;left: 100px;">
    <img src="2.jpg" alt="" width="200" height="200" style="position: relative;top: 100px;left: 300px;">
    <img src="3img.jpg" alt="" width="200" height="200" style="position: relative;top: 100px;left: 500px;border-radius:20px;">
    <img src="4img-removebg-preview.png" alt="" width="200" height="200" style="position: relative;top: 100px;left: 700px;">
    <img src="5img-removebg-preview.png" alt="" width="200" height="200" style="position: relative;top: 100px;left: 900px;">

  </div>

  <h1 style="position: relative;left: 30px;top: -320px;">PRINCIPAL'S DESK - </h1>

  <img src="1.JPG" width="300" height="300" style="position: relative;bottom: 300px;border-radius: 100%;left: 800px;" alt="">

  <i><h3 style="position: relative;left: 100px;bottom: 250px;color: green;">The invisible inner  strength illuminating all aspects of our life does not lie in attaining education only but practicing humility as well.

There is lot of latent potential in every child. Each child has a separate entity. We at Jaypee <br> Public  School, create innovative and progressive intellect, so as to do SWOT analysis of every student and ensure that it all works in his/her favour.

We do not accept the dogma that genius is born: instead we develop myriad <br> of co-curricular activities along with well defined curriculum. The integrated programme of these activities assist our students to master various skills. Our child centred approach is solely based on learning beyond the classroom <br>.   

In the contemporary world in which our young children are  competing and shinning not only on the national but also on international forums, educational needs go far beyond the acquisition of academic competencies <br> 
. In incrementally competitive work places around the world, we at Jaypee Public School believe that development of life skills is of utmost importance, even more than learning skills. We ensure that our children are equipped <br>
 with the power of discretion between right and wrong, with the ability to demarcate knowledge attained and wisdom gained, through education. Our mission is to lead the child to a self discovery process through exposure <br>
  and opportunity.</h3></i>

  <h2 style="position: relative;left: 100px;bottom: 200px;">MS. ANJALI MALIK</h2>


</body>

</html>

Answer 1

如果您将导航设置为 position:absolute，然后将 position 设置为 left、top 等，这将阻止它在扩展时影响其他元素。

.contain ul {
    position: absolute;
    top: 150px;
}

下拉使下面的滑块向下移动以显示内容

Dropdown making the slider below go more down to show the content

html

css

slider

drop-down-menu

image-slider