时间戳

首页 > 解决方案 > 下拉使下面的滑块向下移动以显示内容

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

问题描述

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

* {
  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>

标签： htmlcssdrop-down-menusliderimage-slider

解决方案

如果您制作 nav position:absolute，然后positionwithleft等top，这将阻止它在扩展时影响其他元素。

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

推荐阅读