Наведите курсор на пункт меню, чтобы выделить фон subnav

Question

Я пытаюсь сделать так, чтобы при наведении указателя мыши на одну из категорий в заголовке nav «CALLS | CHATS | MORE» показывался нижний раздел, а ul, связанный с заголовком nav, изменял свой цвет фона, который я знаю.я могу просто добавить класс, используя 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;
      }
    }
  }

Answer 1

Я предполагаю, что вы хотите, чтобы подменю появилось под заголовком nav.Если это так, то переместите суб-навигацию в тег li для соответствующего элемента заголовка, например, так:

 <li class="header__navItem header__navItem--calls">Calls
  <ul class="navItems navItems--calls">
            <li class="navItems__item">First</li>
            <li class="navItems__item">Second</li>
            <li class="navItems__item">Third</li>
            <li class="navItems__item">Fourth</li>
        </ul>
  </li>