无法在多级下拉菜单中定位 ul答案

【问题标题】：Cannot target ul in multi level dropdown-menu无法在多级下拉菜单中定位 ul
【发布时间】：2019-10-02 20:57:18
【问题描述】：

我正在创建一个 HTML 多级下拉菜单。当我将鼠标悬停在第一级菜单上时，我想更改第二级菜单的背景。

我可以在悬停时更改第一级下拉项的颜色，并在下面截断第一个代码

下拉菜单中第二层的背景颜色我可以用第二个代码sn -p来改变

所以我认为只需将这两个 sn-ps 相互连接即可实现我想要的。但是连接两者对我不起作用。剪断的最后一个代码不起作用。我做错了什么？

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

【问题讨论】：

标签： html css target submenu

【解决方案1】：

需要查看您的 html 代码才能确定，但请尝试以下操作：

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

【讨论】：

这是代码的摘录：jsfiddle.net/TheBB23/kon9d6ga/5 您的第一种方法似乎不起作用，谢谢
感谢 jsfiddle。我已经更新了现在应该可以使用的答案。
这不是我想要达到的目标。我希望当您将鼠标悬停在现在的蓝色物体上时，它会得到 ret...
使用background-color。
你能澄清你的要求吗，也许更新一下你到底想做什么的原始问题？我无法理解需要什么。

【解决方案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>

【讨论】：

这正是我想要的。但为什么它在我的项目中不起作用？ jsfiddle.net/TheBB23/kon9d6ga/7
@BB23 可能是因为您的样式规则覆盖了这些规则，或者因为您的 HTML 略有不同