Question

我正在构建多级导航。没有过渡就可以工作：

使用过渡不会出现第二层。

它们有两点不同：

具有过渡：

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

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

1 个答案: