Skip to main content
1 de 3
hugocsl
  • 66,9mil
  • 17
  • 88
  • 166

Vc pode fazer o :hover em um irmão e estilizar o irmão de baixo usando o seletor + assim vc faz o hover no .menu e com o + vc diz que o irmão deve ficar com display:block

Depois vc precisa dizer que o :hover no irmão tb deve deixa-lo como display:block, ou então quando vc sair de um irmão para o outro o .drop-down vai sumir.

Para entender melhor veja o código abaixo:

.menu-dropdown {display: none;list-style: none;}
.menu:hover + .menu-dropdown {display: block;} 
ul {
    margin: 0;
}
.menu:hover {
    background-color: red;
}
.menu-dropdown {
    padding-top: 10px;
}
.menu-dropdown:hover {
    display: block;
}
<ul class="menu">
    <li>
        <a href="#">Teste</a>
    </li>
</ul>
<ul class="menu-dropdown">
    <li><a href="#">Abriu</a></li>
</ul>

hugocsl
  • 66,9mil
  • 17
  • 88
  • 166