将汉堡菜单与屏幕右侧对齐

Question

我的屏幕左侧有一个动画汉堡菜单。当您单击汉堡时，菜单会向右扩展。不过我希望菜单位于右侧。当我使用向右浮动时，菜单移动到右上角，但它仍然向右扩展，因此它移出屏幕，有什么方法可以翻转菜单，使其向左扩展。如果有人不知道我在说什么，这就是我正在使用的代码 https://codepen.io/woodwoerk/pen/BoEGYZ

.menu {
margin: 0 20px 0 0;
padding-left: 1.25em;
cursor: pointer;
position: relative;
width: 30px;
height: 50px;
text-align: right;
float: right;
}

expand {
 box-shadow: rgba(0, 0, 0, 0.1) -2.5px 5px 7.5px, rgba(0, 0, 0, 0.1) 2.5px 5px 7.5px;
width: 200px;
height: 50px;

-webkit-backface-visibility: hidden;
      backface-visibility: hidden;
}

.menu-top-expand {
 top: 50px;
 background: #FFF8E1;

-webkit-transition: all 0.5s 0.2s, left 0.1s;
      transition: all 0.5s 0.2s, left 0.1s;
}

.menu-middle-expand {
top: 100px;
background: #FFECB3;

-webkit-transition: all 0.5s 0.1s, left 0.1s;
      transition: all 0.5s 0.1s, left 0.1s;
 }
.menu-bottom2-expand {
top: 200px;
background: #FFECB3;

-webkit-transition: all 0.5s 0.1s, left 0.1s;
      transition: all 0.5s 0.1s, left 0.1s;
}
.menu-bottom-expand {
top: 150px;
height: 100px;
background: #FFE082;

-webkit-transition: all 0.5s, left 0.1s;
      transition: all 0.5s, left 0.1s;
}

.menu-text-expand{
 color: #000000;
 opacity: 0.8;
 padding: 10px;
 font-size: 1.3em;
  -webkit-transition: all 0.2s 0.7s, font-size 0.1s;
      transition: all 0.2s 0.7s, font-size 0.1s;
}

提前致谢

Answer 1

因此，在将

float: right;

更改为

.menu

后，在

.menu-global

上将

left

更改为

left: auto

并添加

right: 0;

Answer 2

与@pavger相同的更改，只是添加：在.menu-global：hover上，更改left：10px；向右10px；获得正确的效果：

https://codepen.io/anon/pen/jZrVvg

.menu-global:hover {
     right: 10px;
     -webkit-transition: all 0.2s;
     transition: all 0.2s;
 }

@pavger 抱歉，我没有足够的声誉来评论你的帖子:(

Answer 3

好吧，新版本有一些补充，如果可以的话我将使用（将包括返回到 codepen 源代码的链接），但我没有看到

.menu-global:hover

来使菜单 - 汉堡按我想要的方式显示在右侧它到。我缺少什么。预先感谢