问题：
我正在制作一个导航 CSS 模块。我希望子菜单具有与其父菜单不同的背景颜色。但是，如果子菜单中有子菜单，我需要该子菜单具有与其父级的父级相同的背景颜色。我知道如果我对允许的子菜单数量设置限制，我可以相当详细地做到这一点，但我更喜欢选择根据需要拥有尽可能多的嵌套菜单并让它们适当着色。是否有一些 CSS 技巧可以做到这一点，或者我是否因此而被降级为 JS？
我已经研究过:nth-child，:nth-of-type但据我所知，这些仅适用于父节点中的同级元素。
代码：
ul.nav {
list-style: none;
}
ul.nav.dropdown {
height: 0;
overflow: hidden;
}
ul.nav.dropdown.show {
height: auto;
}
ul.nav li {
background-color: #44499f;
}
ul.nav ul li {
background-color: #b6ff00;
}<ul class="nav">
<li><a>Test link</a></li>
<li><a>Test link</a></li>
<li><a>Test link</a></li>
<li>
<a class="dropdown-toggle">Test dropdown</a>
<ul class="nav dropdown">
<li><a>Test link</a></li>
<li><a>Test link</a></li>
<li><a>Test link</a></li>
<li>
<a class="dropdown-toggle">Test dropdown</a>
<ul class="nav dropdown">
<li><a>Test link</a></li>
<li><a>Test link</a></li>
<li><a>Test link</a></li>
</ul>
</li>
</ul> …