Menu Deroulant

Bonjour,

J'essaye de faire un menu déroulant sans utiliser de javascript pour obtenir un résultat comme celui ci :

J'arrive a faire ça :

(les couleurs et la mise en forme du texte ne sont volontairement pas reproduites ici.)

voici mon CSS :

  header {
    display: flex;
    justify-content: space-between;
    background-color: purple;
  }

  .menuDeroulant {
    background-color: lightgreen;
    align-self: center;
  }

  .menuDeroulant:hover .contenuMenu a {
    display: flex;
  }

  .contenuMenu a {
    display: none;
    background-color: lightblue;
  }

.plusGrande {
  background-color: lightyellow;
  display: flex;
}

Et naturellement mon HTML :

<header>
      <p>Au Dessus dans le code, a gauche dans la page</p>
      <div class="plusGrande">
        <div class="menuDeroulant">

          <span class="barres"><i class="fa fa-bars">LES BARRES</i></span>

          <div class="contenuMenu">
            <a href="index.html">Home</a>
            <a href="reponses.html">Réponses</a>
            <a href="#">Contact</a>
          </div>
        </div>
      </div>
    </header>

Le probleme etant donc : le menu déroulant reste dans la div violette et ne dépasse pas...
La solution doit etre très simple mais je ne la trouve pas.
Si quelqu'un avait la solution je lui en serait très reconnaissant de bien vouloir la partager.
Merci beaucoup,
Jockill