Menu

Menu Deroulant [Résolu]

Messages postés
102
Date d'inscription
jeudi 17 juillet 2014
Statut
Membre
Dernière intervention
13 mai 2019
- - Dernière réponse : Jockill
Messages postés
102
Date d'inscription
jeudi 17 juillet 2014
Statut
Membre
Dernière intervention
13 mai 2019
- 13 mai 2019 à 12:44
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
Afficher la suite 

Votre réponse

1 réponse

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