html - 使用过渡不会出现第二级下拉菜单

Question

我正在构建一个多级导航。没有过渡，它的工作原理是：

Demo without transition

使用过渡不会显示第二层。

Demo with transition

它们有两点不同：

带有过渡：

nav ul ul {
  position: absolute;
  top: 100%;
  max-height: 0px;
  overflow: hidden;
  transition: max-height 0.8s linear;
}

nav ul li:hover>ul {
  max-height: 750px;
}

没有过渡：

nav ul ul {
  position: absolute;
  top: 100%;
  display: none;
}

nav ul li:hover>ul {
  display: inherit;
}

第二层出现时，我必须更改什么？

Answer 1

问题是nav ul ul {overflow: hidden;}。

我建议为opacity而不是max-height设置动画：

nav ul ul {
  position: absolute;
  top: 100%;
  opacity: 0;
  transition: opacity .25s;
  pointer-events: none;
}

nav ul li:hover>ul {
  opacity: 1;
  pointer-events: auto;
}

jsFiddle