Double dropdown menu not showing the second dropdown - css

Question

The first dropdown is working normally, but the second I can not make it work at all. I have tried to specify more the classes, but does not work, I believe it is something very simple that I am passing unnoticed. I'll be grateful if someone help me.
The dropdown I say is in the "Other Consoles" menu, it was to show the div with the class "dropdown-content-2" when hovering the "a" tag with the "drop-secundario" class.
.header-menu {
float: right;
height: auto;
font-size: 0;
margin-right: 20px;
}
.header-menu ul li {
height: auto;
display: inline-block;
}
.header-menu ul li.dropdown {
position: relative;
}
.dropdown {
cursor: pointer;
}
.header-menu ul li a {
padding: 0 13px;
text-align: center;
color: #000;
font-size: 16px;
line-height: 70px;
display: block;
font-family: 'Roboto', sans-serif;
font-weight: 700;
letter-spacing: 0.2px;
text-decoration: none;
}
.header-menu ul li:hover {
background: #ff0000;
}
/*Dropdown Menu*/
.dropdown-content {
visibility: hidden;
opacity: 0;
position: absolute;
background: #ff0000;
width: 180px;
right: 0;
transition: all 0.15s ease-in;
}
.header-menu ul li .dropdown-content a {
line-height: 50px;
height: 50px;
font-size: 16px;
color: #000;
text-decoration: none;
display: block;
text-align: left;
text-indent: 10px;
font-family: 'Roboto', sans-serif;
font-weight: 700;
}
.header-menu ul li .dropdown-content a:hover {
background: red;
color: #fff;
}
.dropdown:hover .dropdown-content {
visibility: visible;
opacity: 1;
top: 70px;
}
.arrow-down:after {
content: "";
display: inline-block;
vertical-align: middle;
margin: 0 3px 3px 6px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #000;
}
/*Dropdown 2*/
.dropdown-content a.drop-secundario {
position: relative;
}
.dropdown-content-2 {
visibility: hidden;
opacity: 0;
position: absolute;
background: #fff;
width: 200px;
right: 0;
transition: all 0.15s ease-in;
}
.dropdown-content a.drop-secundario:hover .dropdown-content-2 {
visibility: visible;
opacity: 1;
}
<nav class="header-menu">
<ul>
<li>PS4</li>
<li>XBOX ONE</li>
<li>PC</li>
<li>eSports</li>
<li>Reviews</li>
<li>Vídeos</li>
<li>Lançamentos</li>
<li class="dropdown">
<a class="arrow-down">Mais</a>
<div class="dropdown-content">
<a class="drop-secundario">Outros Consoles</a>
<div class="dropdown-content-2">
PS3
XBOX 360
Switch
WII U
3DS
PS Vita
Retrô
</div>
Autores
</div>
</li>
</ul>
</nav>

Answer 1

Change the selector of your last CSS rule to this:
.dropdown-content a.drop-secundario:hover+.dropdown-content-2
The reason for this: .dropdown-content-2 is not a child of a.drop-secundario, but its sibling, therefore the "+" in that selector.
.header-menu {
float: right;
height: auto;
font-size: 0;
margin-right: 20px;
}
.header-menu ul li {
height: auto;
display: inline-block;
}
.header-menu ul li.dropdown {
position: relative;
}
.dropdown {
cursor: pointer;
}
.header-menu ul li a {
padding: 0 13px;
text-align: center;
color: #000;
font-size: 16px;
line-height: 70px;
display: block;
font-family: 'Roboto', sans-serif;
font-weight: 700;
letter-spacing: 0.2px;
text-decoration: none;
}
.header-menu ul li:hover {
background: #ff0000;
}
/*Dropdown Menu*/
.dropdown-content {
visibility: hidden;
opacity: 0;
position: absolute;
background: #ff0000;
width: 180px;
right: 0;
transition: all 0.15s ease-in;
}
.header-menu ul li .dropdown-content a {
line-height: 50px;
height: 50px;
font-size: 16px;
color: #000;
text-decoration: none;
display: block;
text-align: left;
text-indent: 10px;
font-family: 'Roboto', sans-serif;
font-weight: 700;
}
.header-menu ul li .dropdown-content a:hover {
background: red;
color: #fff;
}
.dropdown:hover .dropdown-content {
visibility: visible;
opacity: 1;
top: 70px;
}
.arrow-down:after {
content: "";
display: inline-block;
vertical-align: middle;
margin: 0 3px 3px 6px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #000;
}
/*Dropdown 2*/
.dropdown-content a.drop-secundario {
position: relative;
}
.dropdown-content-2 {
visibility: hidden;
opacity: 0;
position: absolute;
background: #0fa;
width: 200px;
right: 180px;
top: 0;
transition: all 0.15s ease-in;
}
.dropdown-content .dropdown-content-2:hover,
.dropdown-content a.drop-secundario:hover+.dropdown-content-2 {
visibility: visible;
opacity: 1;
}
<nav class="header-menu">
<ul>
<li>PS4</li>
<li>XBOX ONE</li>
<li>PC</li>
<li>eSports</li>
<li>Reviews</li>
<li>Vídeos</li>
<li>Lançamentos</li>
<li class="dropdown">
<a class="arrow-down">Mais</a>
<div class="dropdown-content">
<a class="drop-secundario">Outros Consoles</a>
<div class="dropdown-content-2">
PS3
XBOX 360
Switch
WII U
3DS
PS Vita
Retrô
</div>
Autores
</div>
</li>
</ul>
</nav>