Не удается нацелиться на ul в многоуровневом выпадающем меню

Question

Я создаю многоуровневое раскрывающееся меню HTML. Я хочу изменить фон второго уровня меню при наведении курсора мыши на первый уровень меню.

Я могу изменить цвет выпадающих элементов первого уровня при наведении курсора на первый код, отсекаемый ниже

Цвет фона второго уровня в раскрывающемся списке, который я могу изменить со вторым фрагментом кода

Поэтому я подумал, что то, что я хочу, достигается простым соединением этих двух фрагментов друг с другом. Но соединение обоих не работает для меня. Последний фрагмент кода не работает. Что я делаю не так?

.dropdown-content > ul > li > a:hover {
    background: blue !important;
}

.dropdown-content > ul > li > ul {
    background: white;
}

.dropdown-content > ul > li > a:hover .dropdown-content > ul > li > ul {
    background: red !important;
}

Answer 1

Нужно было бы увидеть ваш HTML-код, чтобы убедиться, но попробуйте что-то вроде:

.dropdown-content > ul > li > ul > li > a:hover {
    background: red !important;
}

Answer 2

Я думаю, что вы ищете соседние селекторы. Ниже селектор знака плюс + в третьем правиле стиля ожидает привязки тега привязки, а затем находит соседний элемент .dropdown-content и выделяет его дочерний элемент ul красным цветом:

.dropdown-content>ul>li>a:hover {
  background: blue;
}

.dropdown-content>ul>li>ul {
  background: white;
}

.dropdown-content>ul>li>a:hover+.dropdown-content>ul {
  background: red;
}

<div class="dropdown-content">
  <ul>
    <li>
      <a href="#">Menu Item</a>
    </li>
    <li>
      <a href="#">Menu Item</a>
    </li>
    <li>
      <a href="#">Menu Item</a>
      <div class="dropdown-content">
        <ul>
          <li>
            <a href="#">Menu Item</a>
          </li>
          <li>
            <a href="#">Menu Item</a>
          </li>
        </ul>
      </div>
    </li>
  </ul>
</div>