将鼠标悬停在菜单项上以突出显示子导航的背景

Question

我试图做到这一点，所以当您将鼠标悬停在标题导航“ CALLS | CHATS | MORE”中的某个类别上时，下面的子导航就会显示，并且与标题导航相关联的ul会更改其背景颜色，我知道我可以使用jQuery添加类，但是不能使用同级选择器或其他东西吗？我只是认为我的HTML目前在TIA上的布局不正确。这是我目前拥有的。

<header class="header">
    <ul class="header__nav">
        <li class="header__navItem header__navItem--calls">Calls</li>
        <li class="header__navItem header__navItem--chats">Chats</li>
        <li class="header__navItem header__navItem--more">More</li>
    </ul>

    <nav class="navigation">
        <div class="navigation__wrapper cf">
            <ul class="navItems navItems--calls">
                <li class="navItems__item"></li>
                <li class="navItems__item"></li>
                <li class="navItems__item"></li>
                <li class="navItems__item"></li>
                <div class="bgHover"></div>
            </ul>
        </div>
    </nav>
</header>



.header {
  height: 5.8rem;
  background: rgba(25, 25, 25, 0.9);
  position: absolute;
  width: 100%;
  z-index: 999;

  &__nav {
    display: inline-block;
    text-align: center;
    font-size: 0;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    padding: 0;
    margin: 0;
  }

  &__navItem {
    color: $white;
    display: inline-block;
    @include font-size(18);
    padding: 0 4rem;
    line-height: 5.8rem;
    letter-spacing: 0.1rem;
    position: relative;
    cursor: default;
    font-weight: 400;
    text-transform: uppercase;
    font-family: $lato;

    &--calls {
      &:hover ~ .navigation__wrapper .navItems .bgHover {
        max-height: 35rem;
      }
      &:hover {
        color: red;
      }
    }
  }