Html 多级下拉菜单的悬停状态

我正在做一个边栏导航，我被要求去做。下拉列表有两个级别，第一个级别运行良好，但第二个级别有一个奇怪的填充问题，我无法解决。我决不是一个专家，所以请对我放轻松，我只是不明白为什么在第二层浅蓝色区域，悬停状态没有填充整个导航区域，顶部和底部都有填充物。任何帮助都将不胜感激

---

这是因为在活动部分中，您在上有一个：hover规则，该规则大于，但在另一部分中，您在上有一个：hover规则，该规则较小

将：悬停规则添加到，它将起作用。试试这个：

.subnavContainer ul li:not(.active):hover {
    background-color: #FFF;
}

.subnavContainer ul li:not(.active):hover {
    background-color: #FFF;
}