html - CSS 上的下拉菜单过渡

Question

我正在尝试为我正在处理的菜单添加下拉过渡，但似乎我不知道我做错了什么。我的错误在哪里或我必须为过渡下拉菜单添加什么？这是我的 CSS 和 HTML 代码。

.nav li a {
  transition-property: all;
  transition-duration: .2s;
  transition-timing-function: ease-in-out;
}

ul {
  float: left;
  padding: 0px;
  list-style: none;
}

ul li {
  float: left;
  width: 200px;
  height: 40px;
  background-color: #F05050;
  text-align: center;
  font-size: 20px;
  line-height: 40px;
  margin-right: 2px;
}

ul li a {
  text-decoration: none;
  color: white;
  display: block;
}

ul li a:hover {
  position: relative;
  z-index: 1;
  background-color: #C6AEF0;
}

ul li:hover ul {
  position: relative;
  z-index: 1;
}

ul li ul li {
  opacity: 0.9;
  display: none;
}

ul li:hover ul li {
  display: block;
}

<ul class="nav">
  <li><a>Home</a></li>
  <li><a>News</a></li>
  <li><a>Czech Republic</a>
    <ul>
      <li><a>Facts and figures</a></li>
      <li><a>Area</a></li>
      <li><a>Climate</a></li>
    </ul>
  </li>
  <li><a>Study</a>
    <ul>
      <li><a>How to apply</a></li>
      <li><a>Programmes</a></li>
      <li><a>Scholarships</a></li>
      <li><a>Tuition fees</a></li>
    </ul>
  </li>
  <li><a>Living</a>
    <ul>
      <li><a>Arrival</a></li>
      <li><a>Living costs</a></li>
      <li><a>Work</a></li>
    </ul>
  </li>
  <li><a>Contact</a></li>
</ul><br><br>

Answer 1

首先，您仅将过渡应用到 a 元素，然后您不能使用 display 属性进行过渡，您应该为另一个属性设置动画。

使用 max-height 的例子:

.nav li a {
  transition-property: all;
  transition-duration: .2s;
  transition-timing-function: ease-in-out;
}

ul {
  float: left;
  padding: 0px;
  list-style: none;
}

ul li {
  float: left;
  width: 200px;
  height: 40px;
  background-color: #F05050;
  text-align: center;
  font-size: 20px;
  line-height: 40px;
  margin-right: 2px;
}

ul li a {
  text-decoration: none;
  color: white;
  display: block;
}

ul li a:hover {
  position: relative;
  z-index: 1;
  background-color: #C6AEF0;
}

ul li:hover ul {
  position: relative;
  z-index: 1;
}

ul li ul {
  max-height:0px;
  overflow:hidden;
  transition:0.5s;
}

ul li:hover ul {
  max-height:300px;
}

<ul class="nav">
  <li><a>Home</a></li>
  <li><a>News</a></li>
  <li><a>Czech Republic</a>
    <ul>
      <li><a>Facts and figures</a></li>
      <li><a>Area</a></li>
      <li><a>Climate</a></li>
    </ul>
  </li>
  <li><a>Study</a>
    <ul>
      <li><a>How to apply</a></li>
      <li><a>Programmes</a></li>
      <li><a>Scholarships</a></li>
      <li><a>Tuition fees</a></li>
    </ul>
  </li>
  <li><a>Living</a>
    <ul>
      <li><a>Arrival</a></li>
      <li><a>Living costs</a></li>
      <li><a>Work</a></li>
    </ul>
  </li>
  <li><a>Contact</a></li>
</ul><br><br>

---

一些有用的链接以获得更多想法:

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

https://www.w3.org/TR/css-transitions-1/#animatable-properties

Transitions on the display: property

How can I transition height: 0; to height: auto; using CSS?