Salve, ho un problema con una semplice pagina di html

considerando che il body ha una width e una height del 100%, voglio creare un menu che occupi il 5% dell'altezza della finestra, e che a sua volta contegna delle scritte che abbiano un margin-top che mi permetta di centrarle rispetto al menu

Questo l'html

Codice PHP:
<body>

<div id="menu">
   <div id="info">INFO</div>
</div>

</body> 
questo è il CSS

Codice PHP:
html, body
{  
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  
}


#menu
{
   position:relative;
   top: 0; 
   left: 0; 
   background: rgba(0, 102, 206, 0.5);
   min-width: 100%;
   min-height:4%;
   color:#FFF;
   float:left;
 
}

#menu div#info
{
   margin-left:7%;
   margin-top:50%;
   float:left;
 
} 

Mentre per il margin-left sembra che funzioni tutto ok, il margin top del div#info mi allunga l'altezza dell'intero menu in una maniera abnorme, da qui intuisco che la percentuale non si riferisce al div parente, ma forse al body stesso..

A sto punto mi sfugge la logica.. Se io imposto body-->div menu --- > div info
impostando le dimensioni in percentuale del div info, queste non dovrebbero essere relative al parent più diretto, ovvero, il div menu ??

O ho capito male io e l'html in realtà non è in grado di tener conto di tutte queste gerarchie per cui le percentuali son riferite sempre e comunque al parent più "anziano" (in questo caso il body) ?