<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;
}
}
}
}
}
}
目前，Li（关于us）徘徊在徘徊，找不到适当的子元素。下面我添加了代码以满足您的要求。
.header_text {
ul {
display: flex;
list-style: none;
li {
margin: 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 {
.aboutus_content {
display: block;
}
}
}
}
}