Estoy tratando de hacer un menú para un tema de WordPress pero estoy teniendo algunos problemas.

Me gustaría que el menú esté oculto y se muestre solo cuando movemos el botón. El menú es un hijo de un div hermano, algo como esto:

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

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

¿Cómo puedo usar CSS para hacerlo de modo que cuando muevo el #menuicon del.menu aparecería Y otra vez desaparecen cuando ya no estamos sobre el.menu ni el#menuicon?

He intentado varias cosas, pero no logro llegar. Ahora lo tengo así:

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

Creo que necesitaría poder seleccionar al niño.menu de hermano#site-navigation desde nuestro hover en#menuicon. ¿Es esto correcto pensar? ¿Es esto algo que puedo hacer con CSS o necesito usar jQuery?