I was just trying to make a dropdown menu. But what my dropdown menu is doing that it is making the slide below it more go down. I have also attached the HTML and the CSS file. So that you can have a look. If you will run the code, it would not run properly as there is no image attached. Just assume that there is a slider below the dropdown buttons consisting of 5 images change in every 3 seconds. Actually it takes the slider go more down as to show all the content but still after opening the full dropdown it just show 1 link inside of it. So baically there are two errors one it is taking the slider down and second it does not show all the content. I am a beginner at coding, so there could be possible that I have done some silly errors in the code. So just requesting you to pls help me.
* {
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>If you make the nav position:absolute, then position with left, top etc, this will stop it from affecting other element as it expands.
.contain ul {
position: absolute;
top: 150px;
}