在这个特例中我应该写什么CSS规则？

Question

我一直在关注网络教程，为我正在开发的系统创建一个级联菜单，没关系，但我的第3级菜单层有以下问题：

当我的光标位于第二层的列表项上方时：

当我将光标移动到最后一层时，活动列表项的链接会改变颜色，变为不可见：

结构有点像：

...
<nav>
<ul>
    <li><a> Cadastro <a/>
        <ul>
            <li>
                <a>Produtos<a/>
                <ul>
                    <li>
                        <a>Adicionais<a/>
                    </li>
                    <li>
                        <a>Produtos<a/>
                    </li>
                    <li>
                        <a>"Tamanhos"<a/>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>
</nav>

这是我实际使用的CSS：

nav ul ul { 
  display: none; 
  background: #FFD200;  
  padding: 0; 
  width: auto; 
  position: absolute;  
  top: 100%; 
  z-index: 1;
}

nav ul ul li {
  float: none; 
  position: relative;
  z-index: 2;
}

nav ul ul li a {
  padding: 10px 45px;
  font-size: 17x;
  color: #3F1312;
}

nav ul ul li a:hover {
  background: #3F1312;
}

nav ul ul ul {
  position: absolute; 
  left: 100%; 
  top:0;
}

nav ul li:hover > ul {
  display: block;
}

nav ul {
  background: #FFD200; 
  list-style: none;
  width: 100%;
  position: relative;
  display: inline-table;
}

nav ul li {
  float: left;
}

nav ul li:hover {
  background: #3F1312;
}

nav ul li:hover a {
  color: #FFD200;
  font-size: 17px;
}

nav ul li:hover ul li a {
  color: #3F1312;
}

nav ul li:hover ul li a:hover {
  color: #FFD200;
}

nav ul li a {
  display: block; 
  padding: 10px 45px;
  color: #3F1312; 
  font-size: 17px;
  text-decoration: none;
  font-weight: bold;
}

nav ul:after {
  content: ""; 
  clear: both; 
  display: block;
}

我需要知道我必须应用什么css规则才能使其正常工作。欢迎任何帮助。

Answer 1

您需要将：hover属性设置为li元素而不是“a”元素。

看下面的差异

nav ul ul li a:hover {
  background: #3F1312;
}
/* Replace below code instead of Above one*/
nav ul ul li:hover a {
  background: #3F1312;
}


nav ul li:hover ul li a:hover {
  color: #FFD200;
}
/* Replace below code instead of Above one*/
nav ul li:hover ul li:hover a {
  color: #FFD200;
}

修改

签出以下规则，您需要将这些规则添加到您的CSS中以避免出现第三级菜单问题

nav ul li:hover ul li:hover  ul li a{
    color: #3F1312;
    background: #FFD200;
}

nav ul li:hover ul li:hover  ul li:hover a{
    color: #FFD200;
    background: #3F1312;
}