带css过渡的三级菜单

Question

我有这个三级菜单：http://codepen.io/anon/pen/EKmBD

我想为它添加不透明度过渡，这样当你将鼠标悬停在等级1上时，等级2会进行过渡。

谢谢

Answer 1

您正在使用SCSS，但我已经在Pure CSS中创建了它，您可以相应地进行翻译

Demo

只需将其添加到您的CSS

即可

ul li ul {
  opacity: 0;
  transition: opacity 1s;
}

ul li:hover ul {
  opacity: 1;
}

此外，如果你需要更多关卡，只需在ul li ul之后按顺序添加元素，/ *其他声明在这里* /