L'utilisation de menus déroulants dans les menus coulissants

Question

J'ai quelques difficultés à trouver un moyen d'ajouter un sous-menu ou une liste déroulante dans une section de mon menu coulissant. De plus, je ne sais pas comment ajuster le menu déroulant lorsque les autres parties (Text2 et Text3) s'adaptent à l'écran.

Quelqu'un peut-il m'aider à résoudre ce problème ? Merci beaucoup pour l'aide!

Je souhaite ajouter un menu déroulant dans "Texte 1".

Answer 1

Cet accordéon devrait fonctionner. J'essaie de rester aussi simple que possible pour éviter d'encombrer le code. Vous pouvez le rendre plus beau et plus convivial en ajoutant une icône sur le côté droit de l'étiquette... Pour cela, j'ai placé mon lien codepen ici

input {
  display: none;
}

.tabs {
  overflow: hidden;
}

.tab {
  overflow: hidden;
}

.tab-label {
  display: flex;
  justify-content: space-between;
  padding: 1em;
  background: #2c3e50;
  font-weight: bold;
  cursor: pointer;
  color:white;
}

.tab-content {
  max-height: 0;
  padding: 0 1em;
  color: #2c3e50;
  background: white;
  transition: all 0.35s;
  border: 2px solid transparent;
}

input:checked~.tab-content {
  max-height: 100vh;
  padding: 1em;
  border: 2px solid black;
}

input:checked+.tab-label {
  background: darken(#2c3e50, 10%);
}

<div class="submenu_accordion">
  <div class="tabs">
    <div class="tab">
      <input type="checkbox" id="chck1">
      <label class="tab-label" for="chck1">Item 1</label>
      <div class="tab-content">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsum, reiciendis!
      </div>
    </div>
  </div>
</div>