The first dropdown is working normally, but the second is not working at all. I have tried to specify the classes more, but there is no way, I believe it is something very simple that I am letting go. I'll be grateful if you could help me.
The dropdown that I say is in the "Other Consoles" menu, it was to show the div with the "dropdown-content-2" class when passing the mouse over the a tag with the "drop-sub-class" / p>
.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><a href="#">PS4</a></li>
<li><a href="#">XBOX ONE</a></li>
<li><a href="#">PC</a></li>
<li><a href="#">eSports</a></li>
<li><a href="#">Reviews</a></li>
<li><a href="#">Vídeos</a></li>
<li><a href="#">Lançamentos</a></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">
<a href="#">PS3</a>
<a href="#">XBOX 360</a>
<a href="#">Switch</a>
<a href="#">WII U</a>
<a href="#">3DS</a>
<a href="#">PS Vita</a>
<a href="#">Retrô</a>
</div>
<a href="#">Autores</a>
</div>
</li>
</ul>
</nav>