Double Dropdown Menu does not show the second dropdown

Question

The first dropdown is working normally, but the second one is not working at all. I’ve tried to specify more classes, but there’s no way, I think it’s something very simple that I’m missing. I’d be grateful if you could help me.

The dropdown I speak is in the "Other Consoles" menu, it was to show the div with the class "dropdown-content-2" when you hover the mouse over the tag a with the class "drop-secondary".

.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>

Answer 1

You made the CSS understand that the element with the class .dropdown-content-2 was inside the element with the class .drop-secundario on line 104:

.dropdown-content a.drop-secundario:hover .dropdown-content-2 {
  visibility: visible;
  opacity: 1;
}

As he is right after him, try this:

.dropdown-content a.drop-secundario:hover + .dropdown-content-2 {

Adding the positive sign "+" you will make it be selected the next element after the a.drop-secundario.

.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: 100%;
  top: 0;
  transition: all 0.15s ease-in;
  background-color: blue;
}

.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>
    </div>
    <a  class="drop-secundario">Autores</a>
    <div class="dropdown-content-2">
    <a href="#">XBOX 360</a>
    </div>
    </div>
    </li>
  </ul>
</nav>

Answer 2

I added the following lines and solved it. I also made some more design modifications.

.dropdown-content .dropdown-content-2:hover,
.dropdown-content a.drop-secundario:hover+.dropdown-content-2 {
  visibility: visible;
  opacity: 1;
}

.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: #fff;
  width: 180px;
  right: 0;
  transition: all 0.15s ease-in;
  border-width: 0 1px 1px 1px;
  border-style: solid;
  border-color: #000;
}

.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: 180px;
  top: 0;
  transition: all 0.15s ease-in;
  border-width: 0 1px 1px 1px;
  border-style: solid;
  border-color: #000;
}

.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><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>