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:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

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

<!-- language: lang-html -->

    <ul class="menu">
        <li>
            <a href="#">Teste</a>
        </li>
    </ul>
    <ul class="menu-dropdown">
        <li><a href="#">Abriu</a></li>
    </ul>

<!-- end snippet -->


----------


# DICA

Devido o **Box-Model** do CSS o `:hover` na *margem* do elemento não funciona, porém o `:hover` no `padding` do elemento funciona. Então no casso desse menu eu precisei remover as *margens*, e separar os irmãos com `padding`. Caso contrário se tiver uma margem entre um irmão e outro quando o mouse passar sobre essa margem o irmão `.drop-down` vai sumir... https://developer.mozilla.org/pt-BR/docs/Web/CSS/box_model