html - CSS 下拉过渡不起作用

Question

我想做一个下拉菜单的过渡，但是根本不起作用。其他过渡工作得很好，但这个真的很顽固。我究竟做错了什么？

在此示例中，下拉列表在显示时不会转换:

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"><a href="#">ABOUT THE UNIVERSITY<span class="carret">&#9660;</span></a>
      <ul class="dropdown">
        <li>
          <a href="#"></a>За нас</li>
        <li>
          <a href="#"></a>Професии</li>
        <li>
          <a href="#"></a>Планове</li>
        <li>
          <a href="#"></a>Специалности</li>
        <li>
          <a href="#"></a>Преподаватели</li>
        <li>
          <a href="#"></a>Финансиране</li>
        <li>
          <a href="#"></a>Кандидатстване</li>
      </ul>
    </li>
  </ul>
</nav>

Answer 1

我终于通过使用 visibility: hidden 和 visibility: visible 而不是 display: none 和 display: block 让它工作了。谢谢您的帮助!这是现在的样子:

.menu-hover ul li {
display: block;
visibility: hidden;
}

.menu-hover:hover ul li {
background-color: #4CA0DB;
visibility: visible;
transition: all 0.3s ease;
}