.container2{
width: 1000px;
height: 500px;
margin: 100px auto;
background: #00002e;
position: relative;
}
.dropdd{
position: absolute;
top: 35%;
left: 50%;
transform: translate(-50%, -50%);
background: white;
width: 400px;
line-height: 40px;
padding: 8px 25px;
border-radius: 20px;
}
nav label{
color: sandybrown;
font-size: 22px;
font-weight: 500;
display: block;
cursor: pointer;
}
.button span{
float: right;
line-height: 40px;
transition: 0.5s;
}
.button span.rotate{
transform: rotate(-180deg);
}
nav ul{
position: absolute;
background: white;
list-style: none;
top: 75px;
left: 0;
width: 100%;
display: none;
}
[id^=btn]:checked + ul{
display: block;
position: absolute;
background: white;
}
nav .menu:before{
position: absolute;
content: '';
height: 20px;
width: 20px;
background: white;
right: 20px;
top: -10px;
transform: rotate(45deg);
z-index: -1;
}
nav ul li{
line-height: 50px;
padding: 8px 20px;
cursor: pointer;
border-bottom: 1px solid rgba(0,0,0,0.2);
}
nav ul li label{
font-size: 18px;
}
nav ul li a{
color: sandybrown;
text-decoration: none;
font-size: 18px;
display: block;
}
nav ul li a:hover,
nav ul li label:hover{
color: rgb(4, 4, 32);
}
nav ul ul{
position: static;
}
nav ul ul li{
line-height: 30px;
padding-left: 30px;
border-bottom: none;
}
nav ul ul li a{
color: sandybrown;
font-size: 17px;
}
nav ul li span{
font-size: 20px;
float: right;
margin-top: 10px;
padding: 0 10px;
transition: 0.5s;
}
nav ul li span.rotate{
transform: rotate(-180deg);
}
input{
display: none;
}
.a{
margin-top: 100px;
} <body> <div class="container2">
<center><h1 class="ourlabs">Our labs</h1></center>
<nav class="dropdd">
<label for="btn" class="button">AndroMedical labs
<span class="fas fa-caret-down"></span>
</label>
<input type="checkbox" id="btn">
<ul class="menu">
<li>
<label for="btn-2" class="first">venus
<span class="fas fa-caret-down"></span>
</label>
<input type="checkbox" id="btn-2">
<ul>
<li><a href="https://www.almokhtabar.com/">lab 1</a></li>
<li><a href="https://www.medicalcardeg.com/%D9%85%D8%B9%D8%A7%D9%85%D9%84-%D8%A7%D9%84%D8%A8%D8%B1%D8%AC">lab 2</a></li>
</ul>
</li>
<li>
<label for="btn-3" class="second">Saturn
<span class="fas fa-caret-down"></span>
</label>
<input type="checkbox" id="btn-3">
<ul>
<li><a href="http://www.royal-lab.net/">lab 3</a></li>
<li><a href="https://www.alfalaboratory.com/arabic/">lab 4</a></li>
</ul>
</li>
</ul>
</nav>
</body>
</html>welcome, this drop-down is moving to top when I click on it ? what is the problem ?
I have tried a lot to edit it but when I try to edit CSS, the main navbar being stuck! so what can I do to solve this ???
I tried to remove all properties in "nav ul" css code and also it doesn't work -_- thanks anyway.......
Aucun commentaire:
Enregistrer un commentaire