通过 classList.toggle("element") 向元素添加类后应用 CSS 样式

我试着做一个汉堡菜单，但我很难让它正常工作。

我的起点是这个动画https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_menu_icon_js并且第一次我只想添加一个行为：设置不透明度：0；到另一个 div（菜单的内容）。

我认为将 class="change" 添加到这个 div 并且正确的 CSS 规则可以完成这项工作，但尽管应用了类，但只有“菜单按钮”采用新的 CSS，而不是内容 div。有人知道错过了什么吗？

这是我所做的代码笔：https ://codepen.io/anon/pen/pBBNaV

.change .overlay-content {
  opacity: 0;
}

感谢您的时间 ！