html - 创建下拉菜单

Question

目前，当您单击菜单项时，我网站右下角的菜单会向上移动:http://www.jameswinfield.co.uk/v2.html

如何让菜单本身保持原样并让菜单项向上显示？

我的 CSS 如下:

.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;
}

Answer 1

菜单从视口(viewport)外向上滑动，所以 position: fixed 是一个不错的选择。

菜单容器也被赋予了 position: fixed 并且它将保持固定在适当的位置，与视口(viewport)相关。

例子

这是使用 :hover 来简化事情，但可以很容易地进行调整。

nav {
  position: fixed;
  bottom: 0;
  left: 20px;
  padding: 30px;
  z-index: 2;
}
nav > a {
  background: #F90;
  padding: 20px;
  color: #000;
}
.slideUp {
  bottom: -400px;
  left: 20px;
  height: 400px;
  width: 500px;
  background: #F00;
  position: fixed;
  transition: bottom .3s linear;
  z-index: 1;
}
nav:hover + .slideUp,
.slideUp:hover {
  bottom: 80px;
}

<nav>
  <a href="#">I am a menu item, hover me please</a>
</nav>
<div class="slideUp"></div>