Is there a way to apply a grey background to the first div when the dropdown is open? I've managed to add CSS based on the child elements' aria-expanding attribute, but I'm unsure how to do it for a parent element. Since I am using Vue, I prefer not to use any jQuery.
<li v-for="(item, index) in locations" :key="index">
<div id="active-hov-div">
<a
id="brand-nav-item-link-id"
class="brand-nav-item-link"
type="button"
data-bs-toggle="dropdown"
aria-expanded="false"
>
<label class="active-hov">
{{item.label}}
</label>
<i class="fa fa-sort-down test-down"></i>
<i class="fa fa-sort-up test-up"></i>
</a>
<div class="dropdown-menu dropdown-menu-end locations-ul">
<li class="locations-li">
<FindACommunity />
</li>
<ul class="locations-dropdown-ul">
<li v-for="(item3, index3) in item.locationsTitles" :key="index3" class="nav-item" style="padding-bottom: 8px">
<a class="brand-nav-dropdown-link" :href="item3.url">{{item3.title}}</a>
</li>
</ul>
</div>
</div>
</li>