css - 带有 css 转换的三级菜单

Question

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

我想向它添加不透明度过渡，以便当您将鼠标悬停在级别 1 上时，级别 2 会出现过渡。

谢谢

Answer 1

您使用的是 SCSS，但我是用纯 CSS 制作的，您可以相应地翻译它

演示

只需将其添加到您的 CSS

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

ul li:hover ul {
  opacity: 1;
}

另外，如果您需要更多级别，只需在 ul li ul 之后按顺序添加元素，/* 其他声明在这里 */