Hover is not applied in child element [closed]

I’m building a website with a dropdown menu for the "About Us" section, and I want the dropdown to appear on hover. However, the hover effect is not working. The dropdown does not appear when I hover over the "About Us" menu item.

HTML:

<div class="header_text">
<ul>
<li class="home"><a href="#">Home</a></li>
<li class="aboutus">
<a>About Us <i class="fas fa-caret-down"></i></a>
<div class="aboutus_content">
<a href="#">Party History</a>
<a href="#">Party Guidance</a>
</div>
</li>
<li class="whorwe"><a href="#">Who are we</a></li>
<li class="programs"><a href="#">Programs</a></li>
</ul>
</div>


SCSS:

.header_text {
ul {
display: flex;
list-style: none;
li {
padding: 40px 15px;
a {
text-decoration: none;
font-size: 23px;
font-family: 'Varela Round';
color: #5f3f00;
}
.aboutus {
position: relative;
&_content {
position: absolute;
top: 80px;
background-color: aqua;
display: none;
a {
display: block;
}
}
&:hover {
&_content {
display: block;
}
}
}
}
}
}

Continue reading...