I have actually produced drop-down which is functioning effectively yet it’s not shutting when opening up various other. I require to shut one when various other is opened up. It ought to be done via CSS just, no JS. So, I require a repair so every one of them function individually. I have actually attempted yet could not do it. I am uploading the HTML as well as CSS code listed below please have appearance. Please aid me to repair it.
@import link(' https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap');.
*,.
*:: previously,.
*:: after {
box-sizing: border-box;.
}
body {
font-family: 'Roboto', sans-serif;.
font-weight: 500;.
font-size: 15px;.
line-height: 1.4;.
shade: #fff;.
background-color: # 1f2029;.
overflow-x: concealed;.
background-image: link(' https://s3-us-west-2.amazonaws.com/s.cdpn.io/1462889/pat-back.svg');.
background-position: facility;.
background-repeat: repeat;.
background-size: 4%;.
size: 100%;.
screen: -ms-flexbox;.
screen: flex;.
- ms-flex-wrap: cover;.
flex-wrap: cover;.
- ms-flex-pack: facility;.
justify-content: facility;.
padding-top: 100px;.
padding-bottom: 300px;.
}
. sec-center,
. sec-center1,
. sec-center2 {
placement: family member;.
max-width: 100%;.
text-align: facility;.
z-index: 200;.
screen: inline-block;.
margin-right: 5px;.
}
[type="checkbox"]: examined,.
[type="checkbox"]: not(: examined) {
placement: outright;.
left: -9999 px;.
opacity: 0;.
pointer-events: none;.
}
. dropdown: examined+ tag,
. dropdown: not(: examined)+ tag,
. dropdown1: examined+ tag,
. dropdown1: not(: examined)+ tag,
. dropdown2: examined+ tag,
. dropdown2: not(: examined)+ tag {
placement: family member;.
font-family: calibri, sans-serif;.
font-weight: 500;.
font-size: 14px;.
/ * line-height: 2; */.
/ * elevation: 50px; */.
shift: all 200ms linear;.
/ * border-radius: 4px; */.
/ * size: 220px; */.
letter-spacing: 1px;.
screen: -webkit-inline-flex;.
screen: -ms-inline-flexbox;.
screen: inline-flex;.
- webkit-align-items: facility;.
- moz-align-items: facility;.
- ms-align-items: facility;.
align-items: facility;.
- webkit-justify-content: facility;.
- moz-justify-content: facility;.
- ms-justify-content: facility;.
justify-content: facility;.
- ms-flex-pack: facility;.
text-align: facility;.
boundary: none;.
background-color: clear;.
arrow: reminder;.
shade: #fff;.
/ * box-shadow: 0 12px 35px 0 rgb( 255Â 235Â 167/ 15%); */.
cushioning: 4px 20px;.
border-right: 2px strong #fff;.
border-radius: 50px;.
}
. dropdown: examined+ tag: previously,
. dropdown: not(: examined)+ tag: previously,
. dropdown1: examined+ tag: previously,
. dropdown1: not(: examined)+ tag: previously,
. dropdown2: examined+ tag: previously,
. dropdown2: not(: examined)+ tag: prior to {
placement: dealt with;.
top: 0;.
left: 0;.
material: ";.
size: 100%;.
elevation: 100%;.
z-index: -1;.
arrow: car;.
pointer-events: none;.
}
. dropdown: examined+ tag: previously,
. dropdown1: examined+ tag: previously,
. dropdown2: examined+ tag: prior to {
pointer-events: car;.
}
. dropdown: not(: examined)+ label.uil,
. dropdown1: not(: examined)+ label.uil,
. dropdown2: not(: examined)+ label.uil {
material: ";.
placement: outright;.
right: 6px;.
change: revolve( 0deg);.
size: 0;.
elevation: 0;.
border-left: 4px strong clear;.
border-right: 4px strong clear;.
border-top: 4px strong #fff;.
}
. dropdown: examined+ label.uil,
. dropdown1: examined+ label.uil,
. dropdown2: examined+ label.uil {
material: ";.
placement: outright;.
right: 6px;.
change: revolve( 180deg);.
size: 0;.
elevation: 0;.
border-left: 4px strong clear;.
border-right: 4px strong clear;.
border-top: 4px strong #fff;.
}
. dropdown: examined ~. section-dropdown,
. dropdown1: examined ~. section-dropdown1,
. dropdown2: examined ~. section-dropdown2 {
opacity: 1;.
pointer-events: car;.
change: translateY( 0 );.
}
/ *. dropdown: examined+ tag,
. dropdown: not(: examined)+ tag: float {
shade: # 000;.
background-color: #FBBC 05;.
} */
. section-dropdown,
. section-dropdown1,
. section-dropdown2 {
placement: outright;.
cushioning: 5px;.
background-color: # 004287;.
top: 41px;.
left: 0;.
size: 100%;.
border-radius: 4px;.
screen: block;.
/ * box-shadow: 0 14px 35px 0 rgba( 9, 9, 12, 0.4); */.
z-index: 2;.
opacity: 0;.
pointer-events: none;.
change: translateY( 20px);.
shift: all 200ms linear;.
}
. section-dropdown: previously,
. section-dropdown1: previously,
. section-dropdown2: prior to {
placement: outright;.
top: -20 px;.
left: 0;.
size: 100%;.
elevation: 20px;.
material: ";.
screen: block;.
z-index: 1;.
}
. section-dropdown: after,
. section-dropdown1: after,
. section-dropdown2: after {
placement: outright;.
top: -7 px;.
left: 30px;.
size: 0;.
elevation: 0;.
border-left: 8px strong clear;.
border-right: 8px strong clear;.
border-bottom: 8px strong #c 82333;.
material: ";.
screen: block;.
z-index: 2;.
shift: all 200ms linear;.
}
. section-dropdown a,
. section-dropdown1 a,
. section-dropdown2 {a placement: family member;.
shade: #fff;.
shift: all 200ms linear;.
font-family: calibri, sans-serif;.
font-weight: 500;.
font-size: 14px;.
border-radius: 2px;.
cushioning: 5px 0;.
padding-left: 20px;.
padding-right: 15px;.
margin: 2px 0;.
text-align: left;.
text-decoration: none;.
screen: -ms-flexbox;.
screen: flex;.
- webkit-align-items: facility;.
- moz-align-items: facility;.
- ms-align-items: facility;.
align-items: facility;.
justify-content: space-between;.
- ms-flex-pack: disperse;.
}
. section-dropdown a: float,
. section-dropdown1 a: float,
. section-dropdown2 a: float {
shade: # 000;.
background-color: #FBBC 05;.
}
. section-dropdown a.uil,
. section-dropdown1 a.uil,
. section-dropdown2 a.uil {
font-size: 22px;.
}
. dropdown-sub: examined+ tag,
. dropdown-sub: not(: examined)+ tag,
. dropdown-sub1: examined+ tag,
. dropdown-sub1: not(: examined)+ tag,
. dropdown-sub2: examined+ tag,
. dropdown-sub2: not(: examined)+ tag {
placement: family member;.
shade: #fff;.
shift: all 200ms linear;.
font-family: calibri, sans-serif;.
font-weight: 500;.
font-size: 14px;.
border-radius: 2px;.
cushioning: 5px 0;.
padding-left: 20px;.
padding-right: 15px;.
text-align: left;.
text-decoration: none;.
screen: -ms-flexbox;.
screen: flex;.
- webkit-align-items: facility;.
- moz-align-items: facility;.
- ms-align-items: facility;.
align-items: facility;.
justify-content: space-between;.
- ms-flex-pack: disperse;.
arrow: reminder;.
}
. dropdown-sub: examined+ label.uil,
. dropdown-sub: not(: examined)+ label.uil,
. dropdown-sub1: examined+ label.uil,
. dropdown-sub1: not(: examined)+ label.uil,
. dropdown-sub2: examined+ label.uil,
. dropdown-sub2: not(: examined)+ label.uil {
font-size: 22px;.
}
. dropdown-sub: not(: examined)+ label.uil,
. dropdown-sub1: not(: examined)+ label.uil,
. dropdown-sub2: not(: examined)+ label.uil {
material: ";.
placement: outright;.
right: 6px;.
change: revolve( 0deg);.
size: 0;.
elevation: 0;.
border-left: 4px strong clear;.
border-right: 4px strong clear;.
border-top: 4px strong #fff;.
}
. dropdown-sub: examined+ label.uil,
. dropdown-sub1: examined+ label.uil,
. dropdown-sub2: examined+ label.uil {
material: ";.
placement: outright;.
right: 6px;.
change: revolve( 180deg);.
size: 0;.
elevation: 0;.
border-left: 4px strong clear;.
border-right: 4px strong clear;.
border-top: 4px strong #fff;.
}
. dropdown-sub: examined+ tag: float,
. dropdown-sub: not(: examined)+ tag: float,
. dropdown-sub1: examined+ tag: float,
. dropdown-sub1: not(: examined)+ tag: float,
. dropdown-sub2: examined+ tag: float,
. dropdown-sub2: not(: examined)+ tag: float {
shade: # 000;.
background-color: #FBBC 05;.
}
. section-dropdown-sub,
. section-dropdown-sub1,
. section-dropdown-sub2 {
placement: family member;.
screen: block;.
size: 100%;.
pointer-events: none;.
opacity: 0;.
max-height: 0;.
padding-left: 10px;.
padding-right: 3px;.
overflow: concealed;.
shift: all 200ms linear;.
}
. dropdown-sub: examined ~. section-dropdown-sub,
. dropdown-sub1: examined ~. section-dropdown-sub1,
. dropdown-sub2: examined ~. section-dropdown-sub2 {
pointer-events: car;.
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 course=" sec-center">
<> < input course=" dropdown" kind=" checkbox" id=" dropdown" name=" dropdown"/>>.
<< tag course=" for-dropdown" for=" dropdown">> Train Solutions<< i course=" uil uil-arrow-down"><> .
<< div course=" section-dropdown">
<> < a href=" #">> Inside Dropdown Web link 1 << i course=" uil uil-arrow-right"><> .
<< input course=" dropdown-sub" kind=" checkbox" id=" dropdown-sub" name=" dropdown-sub"/>>.
<< tag course=" for-dropdown-sub" for=" dropdown-sub">> Dropdown Below 1 << i course=" uil uil-plus"><> .
<< div course=" section-dropdown-sub">
<> < a href=" #">> Dropdown Below Web Link 1 << i course=" uil uil-arrow-right"><> .
<< a href=" #">> Dropdown Below Web Link << i course=" uil uil-arrow-right"><> .
<.
<< a href=" #">> Inside Dropdown Web link 1 << i course=" uil uil-arrow-right"><> .
<< a href=" #">> Inside Dropdown Web link 1 << i course=" uil uil-arrow-right"><> .
<.
<.
<< div course=" sec-center1">
<> < input course=" dropdown1" kind=" checkbox" id=" dropdown1" name=" dropdown1"/>>.
<< tag course=" for-dropdown1" for=" dropdown1">> Classification<< i course=" uil uil-arrow-down"><> .
<< div course=" section-dropdown1">
<> < a href=" #">> Inside Dropdown Web link 2 << i course=" uil uil-arrow-right"><> .
<< input course=" dropdown-sub1" kind=" checkbox" id=" dropdown-sub1" name=" dropdown-sub1"/>>.
<< tag course=" for-dropdown-sub1" for=" dropdown-sub1">> Dropdown Below 2 << i course=" uil uil-plus"><> .
<< div course=" section-dropdown-sub1">
<> < a href=" #">> Dropdown Below Web Link 2<< i course=" uil uil-arrow-right"><> .
<< a href=" #">> Dropdown Below Web Link << i course=" uil uil-arrow-right"><> .
<.
<< a href=" #">> Inside Dropdown Web link 2 << i course=" uil uil-arrow-right"><> .
<< a href=" #">> Inside Dropdown Web link 3 << i course=" uil uil-arrow-right"><> .
<.
<.
<< div course=" sec-center2">
<> < input course=" dropdown2" kind=" checkbox" id=" dropdown2" name=" dropdown2"/>>.
<< tag course=" for-dropdown2" for=" dropdown2">> Writer<< i course=" uil uil-arrow-down"><> .
<< div course=" section-dropdown2">
<> < a href=" #">> Inside Dropdown Web link 2 << i course=" uil uil-arrow-right"><> .
<< input course=" dropdown-sub2" kind=" checkbox" id=" dropdown-sub2" name=" dropdown-sub2"/>>.
<< tag course=" for-dropdown-sub2" for=" dropdown-sub2">> Dropdown Below 2 << i course=" uil uil-plus"><> .
<< div course=" section-dropdown-sub2">
<> < a href=" #">> Dropdown Below Web Link 2<< i course=" uil uil-arrow-right"><> .
<< a href=" #">> Dropdown Below Web Link << i course=" uil uil-arrow-right"><> .
<.
<< a href=" #">> Inside Dropdown Web link 2 << i course=" uil uil-arrow-right"><> .
<< a href=" #">> Inside Dropdown Web link 3 << i course=" uil uil-arrow-right"><> .
<.
<.
