Die Verwendung von Dropdown-Menüs in Schiebemenüs

Question

Ich habe Schwierigkeiten, eine Möglichkeit zu finden, ein Untermenü oder Dropdown innerhalb eines Abschnitts meines Schiebemenüs hinzuzufügen. Außerdem bin ich mir nicht sicher, wie ich das Menü-Dropdown anpassen soll, wenn sich die anderen Teile (Text2 und Text3) an den Bildschirm anpassen.

Kann mir jemand helfen, dieses Problem zu lösen? Vielen Dank für die Hilfe!

Ich möchte ein Dropdown-Menü in „Text 1“ hinzufügen.

Answer 1

这个手风琴应该是工作的。 我尽量保持它尽可能简单，以免代码混乱。 您可以通过在标签的右侧添加一个图标使其更美观和用户友好...为此，我放置了我的codepen链接这里

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>