Dropdown menu fades in, but doesn't fade out - html

Question

I've coded a dropdown menu with HTML and CSS, and I can sucessfully have it fade in when the user's mouse hovers over the button in the menu. However, when the mouse leaves the dropdown, the dropdown doesn't fade out, it just disappears? I believe this is a syntax error but I'm not sure where. How can I make the dropdown fade out just like I made it fade in?
.top-block-container {
float: left;
width: 50%;
margin: 0.5% 0.25%;
}
.top-block-container:hover .top-block-dropdown {
visibility: visible;
opacity: 1;
transform: translateY(0);
height: auto;
}
.top-block {
width: 100%;
font-family: Lato;
font-weight: 900;
text-align: center;
padding: 10px 0;
border-radius: 50px;
font-size: 25px;
transition: background-color 0.25s linear, box-shadow 0.25s linear;
float: left;
background: linear-gradient(to bottom, #CCCCCC, #AAAAAA);
box-shadow: 0 0 5px black;
margin: 0;
}
.top-block:hover {
cursor: pointer;
box-shadow: 0 0 15px black;
}
.top-block-dropdown {
width: 100%;
background: linear-gradient(to bottom, #CCCCCC, #AAAAAA);
float: left;
margin-top: 7.5px;
border-radius: 25px;
box-shadow: 0 0 15px black;
visibility: hidden;
opacity: 0;
height: 0;
transform: translateY(-2em);
transition: visibility 0s, transform 0.25s, opacity 0.25s linear;
}
.dropdown-option-heading {
font-family: Lato;
font-weight: 700;
margin: 5px 0 0 0;
padding: 5px 10px;
border-bottom: 2px solid white;
}
.dropdown-option {
font-family: Lato;
font-weight: 400;
text-align: center;
border-bottom: 1px solid white;
margin: 0;
padding: 5px 10px;
transition: box-shadow 0.25s linear;
}
.dropdown-option:hover {
background: linear-gradient(to top, dodgerblue, #00B0FF);
cursor: pointer;
}
.last-option {
border: 0;
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
}
<div class="top-block-container">
<h1 class="top-block">ECWMF</h1>
<div class="top-block-dropdown">
<p class="dropdown-option-heading">Global Models</p>
<p class="dropdown-option">GFS</p>
<p class="dropdown-option">ECMWF</p>
<p class="dropdown-option">CMC</p>
<p class="dropdown-option">NAVGEM</p>
<p class="dropdown-option">UKMET</p>
<p class="dropdown-option-heading">Mesoscale Models</p>
<p class="dropdown-option">HRRR</p>
<p class="dropdown-option">HWRF</p>
<p class="dropdown-option">NAM 32km</p>
<p class="dropdown-option">NAM 12km</p>
<p class="dropdown-option">RAP</p>
<p class="dropdown-option">SREF</p>
<p class="dropdown-option last-option">HIRESW</p>
</div>
</div>

Answer 1

Your CSS transition says for the div's visibility to change in zero seconds:
.top-block-dropdown { transition: visibility 0s ... }
So the div disappears instantly. You just need a longer transition time.

Answer 2

Because your transition has visibility 0s. Give that a non-zero value and the visibility transitions. Or just remove visibility from all of those definitions. opacity will suffice.
.top-block-container {
float: left;
width: 50%;
margin: 0.5% 0.25%;
}
.top-block-container:hover .top-block-dropdown {
opacity: 1;
transform: translateY(0);
height: auto;
}
.top-block {
width: 100%;
font-family: Lato;
font-weight: 900;
text-align: center;
padding: 10px 0;
border-radius: 50px;
font-size: 25px;
transition: background-color 0.25s linear, box-shadow 0.25s linear;
float: left;
background: linear-gradient(to bottom, #CCCCCC, #AAAAAA);
box-shadow: 0 0 5px black;
margin: 0;
}
.top-block:hover {
cursor: pointer;
box-shadow: 0 0 15px black;
}
.top-block-dropdown {
width: 100%;
background: linear-gradient(to bottom, #CCCCCC, #AAAAAA);
margin-top: 7.5px;
border-radius: 25px;
box-shadow: 0 0 15px black;
opacity: 0;
height: 0;
transform: translateY(-2em);
transition: transform 0.25s, opacity 0.25s linear;
}
.dropdown-option-heading {
font-family: Lato;
font-weight: 700;
margin: 5px 0 0 0;
padding: 5px 10px;
border-bottom: 2px solid white;
}
.dropdown-option {
font-family: Lato;
font-weight: 400;
text-align: center;
border-bottom: 1px solid white;
margin: 0;
padding: 5px 10px;
transition: box-shadow 0.25s linear;
}
.dropdown-option:hover {
background: linear-gradient(to top, dodgerblue, #00B0FF);
cursor: pointer;
}
.last-option {
border: 0;
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
}
<div class="top-block-container">
<h1 class="top-block">ECWMF</h1>
<div class="top-block-dropdown">
<p class="dropdown-option-heading">Global Models</p>
<p class="dropdown-option">GFS</p>
<p class="dropdown-option">ECMWF</p>
<p class="dropdown-option">CMC</p>
<p class="dropdown-option">NAVGEM</p>
<p class="dropdown-option">UKMET</p>
<p class="dropdown-option-heading">Mesoscale Models</p>
<p class="dropdown-option">HRRR</p>
<p class="dropdown-option">HWRF</p>
<p class="dropdown-option">NAM 32km</p>
<p class="dropdown-option">NAM 12km</p>
<p class="dropdown-option">RAP</p>
<p class="dropdown-option">SREF</p>
<p class="dropdown-option last-option">HIRESW</p>
</div>
</div>