0

O primeiro dropdown está funcionando normalmente, mas o segundo não estou conseguindo fazer funcionar de jeito nenhum. Já tentei especificar mais as classes, mas não tem jeito, acredito que seja algo bem simples que estou deixando passar. Ficarei grato se puderem me ajudar.

O dropdown que falo é no menu "Outros Consoles", era para mostrar a div com a classe "dropdown-content-2" quando se passa o mouse por cima da tag a com a classe "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: 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>

2 Respostas 2

1

Você fez com que o CSS entendesse que o elemento com a classe .dropdown-content-2 estivesse dentro do elemento com a classe .drop-secundario na linha 104:

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

Como ele está logo após ele, tente isso:

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

Adicionando o sinal de positivo "+" você vai fazer com que seja selecionado o próximo elemento após o 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>

1
  • Já tinha resolvido ontem, de qualquer forma obrigado Commented 9/03/2017 às 0:49
0

Adicionei as seguintes linhas e resolveu. Também fiz mais algumas modificações no design.

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .