响应式推送导航菜单：不适用于右侧菜单（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;
 }