28127 sujets

CSS et mise en forme, CSS3

Bonjour,

Je souhaiterais que le menu dont le code figure ci-dessous se ferme lorsque l'on clique sur "Choisissez la pièce à découvrir". Je n'arrive pas à trouver comment faire.
Merci par avance.

Cdt

<style>
    :root {--hauteur-menu: 60px;}
nav.nav-2 {display: inline-block; text-align: center; width: 100%;}
nav.nav-2 > ul {display: flex; text-align: center; height: var(--hauteur-menu);}
nav.nav-2 ul {list-style-type: none; height: auto;}
nav.nav-2 > ul > li {position: relative; height: 100%; flex: 1;}
nav.nav-2 > ul > li > a {transform: translate(-50%, -50%); font-family: "Raleway", "Open Sans", sans-serif; 
    border: 0.0625rem solid var(--glaz); border-radius: 60em; color: var(--glaz); padding:10px 25px;}
li a {text-decoration: none; }
.menu-deroulant > a:after{content: '?'; margin-left: 40px;display: inline-block;}
.sous-menu {margin-top: var(--hauteur-menu); width: 100%; text-align: center; overflow: hidden; max-height: 0;}
.sous-menu li {margin: 20px}
.sous-menu > li > a {font-family: "Raleway", "Open Sans", sans-serif; padding-left: 20px; width: 100%; 
    align-items: center; display: flex;}
nav.nav-2 > ul > li:hover > a{color: var(--glaz)}
.sous-menu > li:hover > a {
  /*color: white;*/ color: var(--glaz);
}
@keyframes rotationFleche {
    0% {transform: rotate(0deg);}
    100%{transform: rotate(90deg);}
}
.menu-deroulant:hover > a:after{animation: rotationFleche 0.2s linear forwards;}
@keyframes apparitionSousMenu {
  0% {
   border: 1px solid var(--glaz); border-radius: 10px;}
  30% {
    border: 1px solid var(--glaz); border-radius: 10px;
  }
  100% {
    max-height: 50em;
    border: 1px solid var(--glaz); border-radius: 10px;;
  }
}
.menu-deroulant:hover > .sous-menu {
  animation: apparitionSousMenu 1s forwards;
}
</style>    

<body>
    <nav class="nav-2">
        <ul>
          <li class="menu-deroulant">
            <a href="#">Choisissez la pièce à découvrir</a>
            <ul class="sous-menu mt-40">
              <li><a href="#jardin">Le jardin</a></li>
              <li><a href="#piece-de-vie">La pièce de vie</a></li>
              <li><a href="#chambres">Les 4 chambres</a></li>
              <li><a href="#cuisine">La cuisine</a></li>
              <li><a href="#salle-de-jeux">La salle de jeux</a></li>
              <li><a href="#salle-d-eau">La salle d'eau</a></li>
              <li><a href="#salle-de-bain">La salle de bain</a></li>
            </ul>
        </ul>
      </nav> 
</body>