Estou tentando criar um menu para um tema WordPress, mas estou tendo alguns problemas.

Gostaria que o menu fosse oculto e exibido apenas quando passamos o botão. O menu é filho de uma divisão de irmãos, algo como isto:

<div id="menuicon>MENU ICON HERE</div>

<nav id="site-navigation">
    <div class="menu">
    </div>
</nav>

Como posso usar CSS para fazer isso quando, ao passar o mouse no #menuicon,.menu iria aparecer. E, novamente, desaparecem quando não terminamos mais.menu nem o#menuicon?

Eu tentei várias coisas, mas não consigo chegar lá. Agora eu tenho assim:

.menu{
    visibility: hidden;
}
#menuicon:hover .menu{
visibility: visible;
}

Eu acho que precisaria ser capaz de selecionar a criança.menu de irmão#site-navigation do nosso pairar sobre#menuicon. Este pensamento está correto? Isso é algo que eu posso fazer com CSS ou preciso usar o jQuery?