Checkbox transitions not working properly - html

Question

I have a problem with transitions with my checkbox. All I want to do is to dropdown menu slowly on low width resolution.
Here is my code:
HTML:
<nav class="header-nav">
<input type="checkbox" id="header-nav-button">
<label for="header-nav-button">☰</label>
</input>
<ul>
<li><a class="header-nav-links" id="active">Home</a></li>
<li><a class="header-nav-links about-us">About Us</a></li>
<li><a class="header-nav-links">Our Services</a></li>
<li><a class="header-nav-links">Prices</a></li>
<li><a class="header-nav-links">Contact</a></li>
</ul>
</nav>
Input CSS:
input[type="checkbox"] + label{
font-size: 40px;
cursor: pointer;
color: #ed145b;
font-family: Lato;
font-weight: 700;
line-height: 38px;
padding: 0 20px;}
input, label{
display: none;}
And my CSS code placed in #media (max-width: 600px):
label{
display: inline-block;
}
#header-nav-button{
}
#header-nav-button:not(:checked) ~ul{
display:none;
height: 0;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all 5s ease;
}
}
#header-nav-button:checked ~ ul{
display: block;
height: 200px;
}
#header-nav-button:checked ~ ul li{
display: block;
padding: 0 20px;
}
I tried the trick with height, visibility and opacity - nothing worked for me unfortunatly. It seems that transition is just not working properly.

Answer 1

You can't animate height.
But you CAN animate max-height.
<nav class="header-nav">
<label for="header-nav-button">☰</label>
<input type="checkbox" id="header-nav-button">
<ul>
<li><a class="header-nav-links" id="active">Home</a></li>
<li><a class="header-nav-links about-us">About Us</a></li>
<li><a class="header-nav-links">Our Services</a></li>
<li><a class="header-nav-links">Prices</a></li>
<li><a class="header-nav-links">Contact</a></li>
</ul>
</nav>
I positioned label above input so I can use the more precise + selector in CSS (#header-nav-button + ul)
label {
font-size: 40px;
cursor: pointer;
color: #ed145b;
font-family: Lato;
font-weight: 700;
line-height: 38px;
padding: 0 20px;
}
input,
label {
display: none;
}
#media ( max-width: 600px) {
label {
display: inline-block;
}
ul {
max-height: 0;
overflow: hidden;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;
}
ul li {
padding: 0 20px;
}
#header-nav-button:checked+ul {
max-height: 999px;
}
}
I removed the display attributes because you can't animate display. Instead, I used overflow: hidden to hide the menu.
And I changed height to max-height. The good thing about this, is you don't need to know the exact height of the menu, you can set it to an amount you know it will never reach. This way you're menu can "grow" without you having to figure out its height every time.
https://jsfiddle.net/w4fwbw3s/8/