How to fix the Second dropdown which is not working? - html

Question

I have created drop-down which is working properly but it's not closing when opening other. I need to close one when other is opened. It should be done through CSS only, no JS. So, I need a fix so all of them work independently. I have tried but couldn't do it. I am posting the HTML and CSS code below please have look. Please help me to fix it.
#import url('https://fonts.googleapis.com/css2?family=Roboto:wght#400;500;700;900&display=swap');
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
font-family: 'Roboto', sans-serif;
font-weight: 500;
font-size: 15px;
line-height: 1.4;
color: #fff;
background-color: #1f2029;
overflow-x: hidden;
background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1462889/pat-back.svg');
background-position: center;
background-repeat: repeat;
background-size: 4%;
width: 100%;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-pack: center;
justify-content: center;
padding-top: 100px;
padding-bottom: 300px;
}
.sec-center,
.sec-center1,
.sec-center2 {
position: relative;
max-width: 100%;
text-align: center;
z-index: 200;
display: inline-block;
margin-right: 5px;
}
[type="checkbox"]:checked,
[type="checkbox"]:not(:checked) {
position: absolute;
left: -9999px;
opacity: 0;
pointer-events: none;
}
.dropdown:checked+label,
.dropdown:not(:checked)+label,
.dropdown1:checked+label,
.dropdown1:not(:checked)+label,
.dropdown2:checked+label,
.dropdown2:not(:checked)+label {
position: relative;
font-family: calibri, sans-serif;
font-weight: 500;
font-size: 14px;
/* line-height: 2; */
/* height: 50px; */
transition: all 200ms linear;
/* border-radius: 4px; */
/* width: 220px; */
letter-spacing: 1px;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
justify-content: center;
-ms-flex-pack: center;
text-align: center;
border: none;
background-color: transparent;
cursor: pointer;
color: #fff;
/* box-shadow: 0 12px 35px 0 rgb(255 235 167 / 15%); */
padding: 4px 20px;
border-right: 2px solid #fff;
border-radius: 50px;
}
.dropdown:checked+label:before,
.dropdown:not(:checked)+label:before,
.dropdown1:checked+label:before,
.dropdown1:not(:checked)+label:before,
.dropdown2:checked+label:before,
.dropdown2:not(:checked)+label:before {
position: fixed;
top: 0;
left: 0;
content: '';
width: 100%;
height: 100%;
z-index: -1;
cursor: auto;
pointer-events: none;
}
.dropdown:checked+label:before,
.dropdown1:checked+label:before,
.dropdown2:checked+label:before {
pointer-events: auto;
}
.dropdown:not(:checked)+label .uil,
.dropdown1:not(:checked)+label .uil,
.dropdown2:not(:checked)+label .uil {
content: '';
position: absolute;
right: 6px;
transform: rotate(0deg);
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #fff;
}
.dropdown:checked+label .uil,
.dropdown1:checked+label .uil,
.dropdown2:checked+label .uil {
content: '';
position: absolute;
right: 6px;
transform: rotate(180deg);
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #fff;
}
.dropdown:checked~.section-dropdown,
.dropdown1:checked~.section-dropdown1,
.dropdown2:checked~.section-dropdown2 {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
/* .dropdown:checked+label,
.dropdown:not(:checked)+label:hover {
color: #000;
background-color: #FBBC05;
} */
.section-dropdown,
.section-dropdown1,
.section-dropdown2 {
position: absolute;
padding: 5px;
background-color: #004287;
top: 41px;
left: 0;
width: 100%;
border-radius: 4px;
display: block;
/* box-shadow: 0 14px 35px 0 rgba(9, 9, 12, 0.4); */
z-index: 2;
opacity: 0;
pointer-events: none;
transform: translateY(20px);
transition: all 200ms linear;
}
.section-dropdown:before,
.section-dropdown1:before,
.section-dropdown2:before {
position: absolute;
top: -20px;
left: 0;
width: 100%;
height: 20px;
content: '';
display: block;
z-index: 1;
}
.section-dropdown:after,
.section-dropdown1:after,
.section-dropdown2:after {
position: absolute;
top: -7px;
left: 30px;
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid #c82333;
content: '';
display: block;
z-index: 2;
transition: all 200ms linear;
}
.section-dropdown a,
.section-dropdown1 a,
.section-dropdown2 a {
position: relative;
color: #fff;
transition: all 200ms linear;
font-family: calibri, sans-serif;
font-weight: 500;
font-size: 14px;
border-radius: 2px;
padding: 5px 0;
padding-left: 20px;
padding-right: 15px;
margin: 2px 0;
text-align: left;
text-decoration: none;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center;
justify-content: space-between;
-ms-flex-pack: distribute;
}
.section-dropdown a:hover,
.section-dropdown1 a:hover,
.section-dropdown2 a:hover {
color: #000;
background-color: #FBBC05;
}
.section-dropdown a .uil,
.section-dropdown1 a .uil,
.section-dropdown2 a .uil {
font-size: 22px;
}
.dropdown-sub:checked+label,
.dropdown-sub:not(:checked)+label,
.dropdown-sub1:checked+label,
.dropdown-sub1:not(:checked)+label,
.dropdown-sub2:checked+label,
.dropdown-sub2:not(:checked)+label {
position: relative;
color: #fff;
transition: all 200ms linear;
font-family: calibri, sans-serif;
font-weight: 500;
font-size: 14px;
border-radius: 2px;
padding: 5px 0;
padding-left: 20px;
padding-right: 15px;
text-align: left;
text-decoration: none;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center;
justify-content: space-between;
-ms-flex-pack: distribute;
cursor: pointer;
}
.dropdown-sub:checked+label .uil,
.dropdown-sub:not(:checked)+label .uil,
.dropdown-sub1:checked+label .uil,
.dropdown-sub1:not(:checked)+label .uil,
.dropdown-sub2:checked+label .uil,
.dropdown-sub2:not(:checked)+label .uil {
font-size: 22px;
}
.dropdown-sub:not(:checked)+label .uil,
.dropdown-sub1:not(:checked)+label .uil,
.dropdown-sub2:not(:checked)+label .uil {
content: '';
position: absolute;
right: 6px;
transform: rotate(0deg);
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #fff;
}
.dropdown-sub:checked+label .uil,
.dropdown-sub1:checked+label .uil,
.dropdown-sub2:checked+label .uil {
content: '';
position: absolute;
right: 6px;
transform: rotate(180deg);
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #fff;
}
.dropdown-sub:checked+label:hover,
.dropdown-sub:not(:checked)+label:hover,
.dropdown-sub1:checked+label:hover,
.dropdown-sub1:not(:checked)+label:hover,
.dropdown-sub2:checked+label:hover,
.dropdown-sub2:not(:checked)+label:hover {
color: #000;
background-color: #FBBC05;
}
.section-dropdown-sub,
.section-dropdown-sub1,
.section-dropdown-sub2 {
position: relative;
display: block;
width: 100%;
pointer-events: none;
opacity: 0;
max-height: 0;
padding-left: 10px;
padding-right: 3px;
overflow: hidden;
transition: all 200ms linear;
}
.dropdown-sub:checked~.section-dropdown-sub,
.dropdown-sub1:checked~.section-dropdown-sub1,
.dropdown-sub2:checked~.section-dropdown-sub2 {
pointer-events: auto;
opacity: 1;
max-height: 999px;
}
.section-dropdown-sub a,
.section-dropdown-sub1 a,
.section-dropdown-sub2 a {
font-size: 14px;
}
.section-dropdown-sub a .uil,
.section-dropdown-sub1 a .uil,
.section-dropdown-sub2 a .uil {
font-size: 20px;
}
<div class="sec-center">
<input class="dropdown" type="checkbox" id="dropdown" name="dropdown" />
<label class="for-dropdown" for="dropdown">Train Services<i class="uil uil-arrow-down"></i></label>
<div class="section-dropdown">
Inside Dropdown Link 1 <i class="uil uil-arrow-right"></i>
<input class="dropdown-sub" type="checkbox" id="dropdown-sub" name="dropdown-sub" />
<label class="for-dropdown-sub" for="dropdown-sub">Dropdown Sub 1 <i class="uil uil-plus"></i></label>
<div class="section-dropdown-sub">
Dropdown Sub Link 1 <i class="uil uil-arrow-right"></i>
Dropdown Sub Link <i class="uil uil-arrow-right"></i>
</div>
Inside Dropdown Link 1 <i class="uil uil-arrow-right"></i>
Inside Dropdown Link 1 <i class="uil uil-arrow-right"></i>
</div>
</div>
<div class="sec-center1">
<input class="dropdown1" type="checkbox" id="dropdown1" name="dropdown1" />
<label class="for-dropdown1" for="dropdown1">Category<i class="uil uil-arrow-down"></i></label>
<div class="section-dropdown1">
Inside Dropdown Link 2 <i class="uil uil-arrow-right"></i>
<input class="dropdown-sub1" type="checkbox" id="dropdown-sub1" name="dropdown-sub1" />
<label class="for-dropdown-sub1" for="dropdown-sub1">Dropdown Sub 2 <i class="uil uil-plus"></i></label>
<div class="section-dropdown-sub1">
Dropdown Sub Link 2<i class="uil uil-arrow-right"></i>
Dropdown Sub Link <i class="uil uil-arrow-right"></i>
</div>
Inside Dropdown Link 2 <i class="uil uil-arrow-right"></i>
Inside Dropdown Link 3 <i class="uil uil-arrow-right"></i>
</div>
</div>
<div class="sec-center2">
<input class="dropdown2" type="checkbox" id="dropdown2" name="dropdown2" />
<label class="for-dropdown2" for="dropdown2">Author<i class="uil uil-arrow-down"></i></label>
<div class="section-dropdown2">
Inside Dropdown Link 2 <i class="uil uil-arrow-right"></i>
<input class="dropdown-sub2" type="checkbox" id="dropdown-sub2" name="dropdown-sub2" />
<label class="for-dropdown-sub2" for="dropdown-sub2">Dropdown Sub 2 <i class="uil uil-plus"></i></label>
<div class="section-dropdown-sub2">
Dropdown Sub Link 2<i class="uil uil-arrow-right"></i>
Dropdown Sub Link <i class="uil uil-arrow-right"></i>
</div>
Inside Dropdown Link 2 <i class="uil uil-arrow-right"></i>
Inside Dropdown Link 3 <i class="uil uil-arrow-right"></i>
</div>
</div>

Answer 1

For the second dropdown you need to change the class names. Your first dropdown and second dropdown has exactly same class names, What this will do is you click on second dropdown, but you activate first. Also give CSS to each and every new class name you make.

Answer 2

To make both dropdown independent, you need to make sure they have unique identifiers. Check this example:
.dropdown {
position: relative;
display: inline-block;
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown-content {
display: none;
position: absolute;
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown:hover .dropdown-content {
display: block;
}
<div class="dropdown">
<button class="dropbtn">Dropdown 1</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Dropdown 2</button>
<div class="dropdown-content">
Link 4
Link 5
Link 6
</div>
</div>
In this code, you can see that each dropdown has a unique parent container with the class 'dropdown' and each has its own unique class 'dropbtn'. 'dropdown-content' div contained the dropdown content.