多嵌套菜单Javascript/css

Question

我正试图用CSS制作一个嵌套菜单，但很难做到这一点，我已经尝试过了，但无法继续。我做错了什么吗？如果是，有人能解释一下CSS在这些情况下是如何工作的吗。。。这是一个动态生成的菜单。。。

我无法让子菜单相应地工作，无论我怎么搜索，我都无法让我的子菜单像其他子菜单一样工作！：(

感谢您的帮助！

#category_list {
display: flex;
justify-content: space-evenly;
list-style-type: none;
padding: 8px;
background-color: azure;
}
.dropdown .submenu {
display: none;
list-style-type: none;
}
.dropdown:hover .submenu {
display: block;
list-style-type: none;
background-color: antiquewhite;
}
#category_list .dropdown .submenu:hover {
display: block;
}
#category_list .dropdown .submenu .dropdown .submenu {
display: none;
padding: 20px;
}

<ul class=category_list>
<li class="dropdown">
Computer Equipment
<ul class="submenu">
<li class="dropdown">
Computer Parts
<ul class="submenu">
<li>
<a href="categoryPage.html?categoryId=3">MotherBoard</a>
</li>
<li>
<a href="categoryPage.html?categoryId=3">Power Supply</a>
</li>
<li>
<a href="categoryPage.html?categoryId=3">Graphic Card</a>
</li>
<li>
<a href="categoryPage.html?categoryId=3">Processor</a>
</li>
<li>
<a href="categoryPage.html?categoryId=3">Memmory</a>
</li>
<li>
<a href="categoryPage.html?categoryId=3">Computer Case</a>
</li>
</ul>
</li>
<li>
Storage
<ul>
<li>
<a>SSD</a>
</li>
<li>
<a>Hard drive</a>
</li>
</ul>
</li>
<li>
Network
<ul>
<li>
<a>Router</a>
<a>Switch</a>
<a>Network Cable</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>

Answer 1

由于css的级联特性，使用相同类名的多个嵌套元素确实会带来复杂性。你的特异性应该用">quot；直属子选择器，因此它特定于每一级别的下拉/子菜单对何时执行悬停样式。

这些将针对所有子子菜单；级别"：

.dropdown .submenu {}
.dropdown:hover .submenu {}

相反，您想要控制的直接子菜单。下拉菜单：

.dropdown:hover > .submenu {displacy: block; ...otherVisibilityStyles}

链接到基于代码的工作示例