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

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;
      }
    }
  }

Answer 1

我假设您希望子菜单显示在标题导航下方。如果是这样，则将您的子导航移动到相应标题项的 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>