Menu Deroulant [Résolu/Fermé]

Signaler
Messages postés
102
Date d'inscription
jeudi 17 juillet 2014
Statut
Membre
Dernière intervention
13 mai 2019
-
Messages postés
102
Date d'inscription
jeudi 17 juillet 2014
Statut
Membre
Dernière intervention
13 mai 2019
-
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

1 réponse

Messages postés
102
Date d'inscription
jeudi 17 juillet 2014
Statut
Membre
Dernière intervention
13 mai 2019
12
J'ai utilisé la propriété CSS
position : absolute ;
pour permettre à l'élément de faire ce que je voulais
Merci