floating a list within a div - css

Question

I want to do a collapsible button that opens a list of items when clicked, I'm trying to float the elements left within the button but it's not seem to be working.
.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

Please try the following
<div class="collapsible-content">
<ul class=my-float"> <li>num 1</li>
<li>num2</li>
<li>num3</li>
<li>num4</li></ul>
// in your css file add this
.my-float li{
float:left;
}

Answer 2

You need Javascript to detect the button click and then do something with it. This code adds a class to the div containing the menu and changes the maximum height.
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>