CSS drop-down transition doesn't work - html

Question

I want to make a drop-down menu transition, but it doesn't work at all. Other transitions work just fine but this one is really stubborn. What exactly am I doing wrong ?
In this example, the drop-down does not transition when it is shown:
a {
color: #FFF;
text-decoration: none;
}
li {
height: 20px;
padding-top: 7px;
padding-bottom: 7px;
padding-left: 5px;
padding-right: 5px;
font-size: 17px;
color: #FFF;
display: inline-block;
vertical-align: top;
background-color: #4CA0DB;
}
li:hover {
transition: all 0.3s;
background-color: #4CA0DB;
}
.carret {
position: relative;
margin-left: 5px;
bottom: 1px;
font-size: 12px;
}
/*this is where it breaks*/
.menu-hover ul li {
display: none;
}
.menu-hover:hover ul li {
background-color: #4CA0DB;
display: block;
}
.menu-hover ul {
transition: all 0.3s ease;
}
<nav>
<ul>
<li class="menu-hover">ABOUT THE UNIVERSITY<span class="carret">▼</span>
<ul class="dropdown">
<li>
За нас</li>
<li>
Професии</li>
<li>
Планове</li>
<li>
Специалности</li>
<li>
Преподаватели</li>
<li>
Финансиране</li>
<li>
Кандидатстване</li>
</ul>
</li>
</ul>
</nav>

Answer 1

I finally got it working by using visibility: hidden and visibility: visible instead of display: none and display: block. Thanks for the help! This is how it looks now:
.menu-hover ul li {
display: block;
visibility: hidden;
}
.menu-hover:hover ul li {
background-color: #4CA0DB;
visibility: visible;
transition: all 0.3s ease;
}