I'm working with a React script that includes a specific element. I want to apply more than one :focus-within selector in CSS, but for some reason only the dropdown selector is being expressed when I focus on the element. Here's the code: React JS:
return (
<div>
<div className="blind"></div>
<div className="menufocus" tabIndex={0}>
<div className="menuicon">
<FontAwesomeIcon icon={solid("bars")} />
</div>
<div className="dropdown">
<div className="dropitem">HOME</div>
<div className="dropitem">ABOUT</div>
<div className="dropitem">NEWS</div>
<div className="dropitem">ICONHOLDERS</div>
</div>
</div>
</div>
);
CSS:
display: flex;
align-items: flex-end;
width: fit-content;
height: fit-content;
max-height: 1vh;
transition: max-height 1s;
overflow: hidden;
flex-direction: column;
flex-wrap: nowrap;
align-content: flex-end;
justify-content: flex-start;
color: white;
}
.blind {
z-index: 1001;
opacity: 0.7;
width: 100vw;
height: 100vh;
position: absolute;
top: 0px;
left: 0px;
background-color: black;
display: none;
transition: all 1s;
}
.menufocus {
z-index: 1002;
position: absolute;
top: 0px;
right: 0px;
display: flex;
justify-content: flex-start;
flex-direction: column;
flex-wrap: nowrap;
align-content: flex-end;
align-items: flex-end;
width: fit-content;
height: fit-content;
}
.menufocus:focus-within .dropdown {
max-height: 18vh;
}
.menufocus:focus-within .blind {
display: block;
}
Thank you!