菜单自动移动

Question

当点击Mixcloud或Youtube图标时，是否有人能够建议为什么右下方菜单向上移动？

我已经尝试修改各个部分但没有成功。

http://www.jameswinfield.co.uk/v2.html#

代码是：

.menu4 {
  position: fixed;
  z-index: 9999;
  margin-top: 0px;
}

.menu4 nav {
  -webkit-opacity: 0;
  -moz-opacity: 0;
  -ms-opacity: 0;
  -o-opacity: 0;
  opacity: 0;
}

.menu4 input#slide4:checked ~ nav {
  -webkit-opacity: 1;
  -moz-opacity: 1;
  -ms-opacity: 1;
  -o-opacity: 1;
  opacity: 1;
}

.menu4 label {
  position: fixed;
  font-size: 50px;
  cursor: pointer;
  z-index: 9999;
}

.menu4 input#slide4 {
  display: none;
}

.menu4 input#slide4:checked ~ label.open i {
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

.menu4 label i,
.menu4 nav,
.menu4 nav ul li a span {
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.menu4 label,
.menu4 nav ul li a i,
.menu4 nav ul li a span {
  line-height: 120px;
  text-align: center;
  width: 120px;
  height: 120px;
}

.menu4 nav ul {
  list-style: none;
  overflow: hidden;
}

.menu4 nav ul li a i {
  font-size: 30px;
}

.menu4 nav ul li a span {
  font-family: 'Lato', tahoma, sans-serif;
  font-size: 17.14285714px;
  text-transform: uppercase;
  width: 0;
}

.menu4 nav ul li a:hover span {
  width: 100px;
  padding: 0 10px;
}

.menu4 nav ul li.active a span {
  width: 100px;
  padding: 0 10px;
}

.menu4.top {
  bottom: 0px;
}

.menu4.bottom {
  bottom: 0px;
}

.menu4.left,
.menu4.left label {
  right: 0;
}

.menu4.right,
.menu4.right label {
  right: 0;
}

.menu4.horizontal nav ul li,
.menu4.horizontal nav ul li a span {
  float: left;
}

.menu4.left.horizontal nav {
  margin-right: -50px;
}

.menu4.left.horizontal input#slide4:checked ~ nav {
  margin-right: 120px;
}

.menu4.right.horizontal nav {
  margin-right: -60px;
}

.menu4.right.horizontal input#slide4:checked ~ nav {
  margin-right: 60px;
}


.menu4.blue label,
.menu4.blue nav ul li a ul li i {
  color: #F82D27;

}

.menu4.blue nav ul li a span {
  color: #F235E9;
}

.mixcloud {
    display: none;
    opacity: 0.7;
    margin-left: 10px;
}

.youtube {
    display: none;
    opacity: 0.7;
}