плавающий список внутри div

Question

Я хочу создать складную кнопку, которая при нажатии открывает список элементов, я пытаюсь перемещать элементы, оставленные внутри кнопки, но, похоже, она не работает.

.collapsible-group {
  overflow: hidden;
}

.collapsible-content {
  float: left;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  display: block;
}

.collapsible {
  color: black;
  cursor: pointer;
  padding: 18px;
  width: 33%;
  border: none;
  text-align: center;
  outline: none;
  font-size: 15px;
  background-color: Transparent;
  display: block;
  margin: auto;
}

<div class="collapsible-group">
  <button class="collapsible">Modern Trade</button>
  <div class="collapsible-content">
    <ul>
      <li>num 1</li>
      <li>num2</li>
      <li>num3</li>
      <li>num4</li>
    </ul>
  </div>
</div>

Answer 1

Вам нужен Javascript, чтобы обнаружить нажатие кнопки и что-то с ней сделать.Этот код добавляет класс в div, содержащий меню, и изменяет максимальную высоту.

const myButton = document.getElementsByTagName("button")[0];
myButton.onclick = () => {
  const menu = document.getElementsByClassName("collapsible-content")[0];
  menu.classList.toggle("showMenu");
}

.collapsible-group {
  overflow: hidden;
}

.collapsible-content {
  float: left;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  display: block;
}

.collapsible-content.showMenu {
  max-height: 1000px;
}

.collapsible {
  color: black;
  cursor: pointer;
  padding: 18px;
  width: 33%;
  border: none;
  text-align: center;
  outline: none;
  font-size: 15px;
  background-color: Transparent;
  display: block;
  margin: auto;
}

<div class="collapsible-group">
  <button class="collapsible">Modern Trade</button>
  <div class="collapsible-content">
    <ul>
      <li>num 1</li>
      <li>num 2</li>
      <li>num 3</li>
      <li>num 4</li>
    </ul>
  </div>
</div>

Answer 2

Пожалуйста, попробуйте следующее

<div class="collapsible-content">
  <ul class=my-float"> <li>num 1</li>
  <li>num2</li>
  <li>num3</li>
  <li>num4</li></ul>

// в вашем файле CSS и добавьте это

.my-float li{
  float:left;
}