CSS3 Side Menu, перемещение по экрану?

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

Если я получил ваш вопрос правильно, все, что вам нужно сделать, это нажать вниз ul элемент так же, как вам нравится в CSS, как это:

#navigationMenu { 
    margin-top: 100px; 
} 

В этом примере, я толкнул его вниз для 100px, но вы можете иметь некоторое значение в процентах, а также. Проверьте рабочий пример в CODEPEN

Answer 2

вы можете использовать

#navigationMenu { 
 
    margin-top: 4.50%; 
 
}

cekout: http://codepen.io/anon/pen/jWQNNg

Answer 3

вы можете использовать

#navigationMenu { царапанию gin-top: 4,50%; }enter code here

* { 
 
    margin: 0; 
 
    border: 0; 
 
    padding: 0; 
 
} 
 
body { 
 
    background: #f0f0f0; 
 
    font: 14px/20px Arial, San-Serif; 
 
    color: #555; 
 
    margin: 0; 
 
} 
 

 
#navigationMenu li{ 
 
\t list-style:none; 
 
\t height:39px; 
 
\t padding:2px; 
 
\t width:40px; 
 
    
 
} 
 
#navigationMenu span { 
 
\t width:0; 
 
\t left:38px; 
 
\t padding:0; 
 
\t position:absolute; 
 
\t overflow:hidden; 
 

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

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

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

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

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

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

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

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

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

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

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

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

 
#navigationMenu .zzz { background-position:-227px 0;} 
 
#navigationMenu .zzz:hover{ background-position:-227px -39px;} 
 
#navigationMenu .zzz span{ 
 
\t background-color:#c3bce5; 
 
\t color:#604e18; 
 
\t text-shadow:1px 1px 0 #d8b54b; 
 
} 
 

 

 
header { 
 
    background: #F5F5F5; 
 
    width: 100%; 
 
    height: 86px; 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: 100; 
 
    opacity: 0.9%; 
 
    border-bottom: 1px solid gray; 
 
} 
 

 
#logo { 
 
    margin: 20px; 
 
    float: right; 
 
    width: 200px; 
 
    height:55px; 
 
    background: url(http://res.cloudinary.com/dejafqqbm/image/upload/v1454696003/logo_he9bmd.jpg) no-repeat center; 
 
} 
 
#navigationMenu { 
 
    margin-top: 4.50%; 
 
}

<html> 
 
    <head> 
 
    <meta charset="UFT-8"> 
 
    <title>Web Site Images</title> 
 
    </style> 
 
    </head> 
 
<body> 
 
    <header> 
 
    
 
    <a href="#" id="logo"></a> 
 
    <ul id="navigationMenu"> 
 
    <li> 
 
\t  <a class="home" href="#"> 
 
      <span>Home</span> 
 
     </a> 
 
    </li> 
 

 
    <li> 
 
    \t <a class="images" href="#"> 
 
      <span>Images</span> 
 
     </a> 
 
    </li> 
 

 
    <li> 
 
\t  <a class="Links" href="#"> 
 
      <span>Links</span> 
 
     </a> 
 
    </li> 
 

 
    <li> 
 
    \t <a class="ContactUs" href="#"> 
 
      <span>Contact Us</span> 
 
     </a> 
 
    </li> 
 
    
 
    <li> 
 
    \t <a class="hhh" href="#"> 
 
      <span>hhh</span> 
 
     </a> 
 
    </li> 
 
    <li> 
 
    \t <a class="ggg" href="#"> 
 
      <span>ggg</span> 
 
     </a> 
 
    </li> 
 
    <li> 
 
    \t <a class="zzz" href="#"> 
 
      <span>zzz</span> 
 
     </a> 
 
    </li> 
 
    
 
</ul> 
 
    </u> 
 
    </header> 
 

cekout: http://codepen.io/anon/pen/jWQNNg