The use of drop-down menus in sliding menus

Question

I'm having some difficulty trying to find a way to add a submenu or dropdown within a section of my sliding menu. Also, I'm not sure how to adjust the menu dropdown when the other parts (Text2 and Text3) adapt to the screen.

Can anyone help me solve this problem? Many thanks for the help!

I want to add a dropdown menu in "Text1".

Answer 1

This accordion should be working. I tried to keep it as simple as possible to avoid cluttering the code. You can make it more beautiful and user friendly by adding an icon to the right of the label... for this I have placed my codepen link here

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>