What CSS rule should I write in this special case? - html

Question

I've been following a web tutorial to create a cascading menu for a system I am developing, it is ok but I have the following problem on my 3rd level menu layer:
When my cursor is above a list item of 2nd layer:
When I move the cursor to the last layer, the link of the active list item changes it color, becoming invisible:
The structure is somewhat like that:
...
<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>
and this is the css I'm using actually:
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;
}
I need to know what css rule I have to apply to make it work. Any help is welcome.

Answer 1

You need to set :hover property to the li element and not to "a" element.
see the difference below
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;
}
Edit
Checkout following rules, You will need to add these rules into your css to avoid third level menu problem
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;
}