CSS3 侧边菜单，在屏幕上移动？

Question

我已经为侧边菜单编写了一些 CSS3 代码，但我需要将菜单向下移动到屏幕下方(因为它太高了)。为了移动菜单，我需要更改 css3 的哪一部分？我的 CCS3code 在下面，或者您可以在 http://codepen.io/aaron_1986/pen/wMYoYK 查看整个网页

#navigationMenu li{
    list-style:none;
    height:39px;
    padding:2px;
    width:40px;

}
#navigationMenu span {
    width:0;
    left:38px;
    padding:0;
    position:absolute;
    overflow:hidden;

    font-family:'Myriad Pro',Arial, Helvetica, sans-serif;
    font-size:18px;
    font-weight:bold;
    letter-spacing:0.6px;
    white-space:nowrap;
    line-height:39px;

    /* CSS3 Transition: */
    -webkit-transition: 0.25s;

    /* Future proofing (these do not work yet): */
    -moz-transition: 0.25s;
    transition: 0.25s;
}

#navigationMenu a{
    /* The background sprite: */
    background: url('http://res.cloudinary.com/dejafqqbm/image/upload        /v1454847965/navigation_kxrtcc.jpg') no-repeat;

   height:39px;
    width:38px;
    display:block;
    position:relative;
}

#navigationMenu a:hover span{ width:auto; padding:0      20px;overflow:visible;     }
#navigationMenu a:hover{
text-decoration:none;

-moz-box-shadow:0 0 5px #fff;
-webkit-box-shadow:0 0 5px #fff;
box-shadow:0 0 5px #fff;
}

#navigationMenu .home { background-position:0 0;}
#navigationMenu .home:hover {   background-position:0 -39px;}
#navigationMenu .home span{
background-color:#7da315;
 color:#3d4f0c;
text-shadow:1px 1px 0 #99bf31;
}

#navigationMenu .images { background-position:-38px 0;}
#navigationMenu .images:hover { background-position:-38px -39px;}
#navigationMenu .images span{
   background-color:#1e8bb4;
    color:#223a44;
    text-shadow:1px 1px 0 #44a8d0;
}

   #navigationMenu .Links { background-position:-76px 0;}
   #navigationMenu .Links:hover { background-position:-76px -39px;}
   #navigationMenu .Links span{
    background-color:#c86c1f;
    color:#5a3517;
    text-shadow:1px 1px 0 #d28344;
}

#navigationMenu .ContactUs { background-position:-114px 0;}
#navigationMenu .ContactUs:hover{ background-position:-114px -39px;}
#navigationMenu .ContactUs span{
  background-color:#d0a525;
  color:#604e18;
  text-shadow:1px 1px 0 #d8b54b;
}

#navigationMenu .hhh { background-position:-38px 0;}
#navigationMenu .hhh:hover { background-position:-38px -39px;}
#navigationMenu .hhh span{
    background-color:#af1e83;
    color:#460f35;
    text-shadow:1px 1px 0 #d244a6;
}
#navigationMenu .ggg { background-position:-76px 0;}
#navigationMenu .ggg:hover { background-position:-76px -39px;}
#navigationMenu .ggg span{
    background-color:#ffb1b1;
    color:#5a3517;
    text-shadow:1px 1px 0 #d28344;
}

#navigationMenu .zzz { background-position:-114px 0;}
#navigationMenu .zzz:hover{ background-position:-114px -39px;}
#navigationMenu .zzz span{
    background-color:#d9d1ff;
    color:#604e18;
    text-shadow:1px 1px 0 #d8b54b;
}

Answer 1

如果我答对了你的问题，你所需要做的就是在 CSS 中尽可能多地按下 ul 元素，如下所示:

#navigationMenu {
   margin-top: 100px;
}

在这个例子中，我将它向下推 100px 但你也可以有一些百分比值。查看 CODEPEN 中的工作示例