css - 响应式推送导航菜单 : Not working for Right Menu (CSS)

Question

我正在关注 Brad Frost 的 Codepen。 http://codepen.io/bradfrost/pen/IEBrz/

但是我在右边有一个菜单。

所以我改变了

.js nav[role=navigation] {
  width: 16em;
  height: 100%;
  position: absolute;
  top: 0;
  left: -16em;
}

到

.js nav[role=navigation] {
  width: 16em;
  height: 100%;
  position: absolute;
  top: 0;
  right: -16em; //this attribute was changed from left to right
}

但是当我这样做时，菜单不会被隐藏。我得到一个水平滚动条。我该如何解决这个问题？

您可以在 Codepen 上自己尝试看看。

我不明白为什么这行不通。我在这里做错了什么？

Answer 1

您将需要更改更多的 css 属性:

 a.menu-link {
     float: right;
 }
 .js nav[role=navigation] {
   right: -16em;
 }
 .wrap.active {
     right: 0;
 }