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>