どのように応答するハンバーガーメニューを取得するコンテンツをプッシュダウンしない

Question

私は現在、その下のコンテンツをプッシュダウンしているこの応答ハンバーガーnavを持っています。その代わりにコンテンツの上にマウスを置くだけの方法がありますか？私はたくさんのことを試みましたが、私が働いていることは何もありませんが、私は専門家ではありません。どんな助けでも大歓迎です！ありがとう！

jsfiddle here

<nav class="header"> 
     <input class="menu-btn" type="checkbox" id="menu-btn" /> 
     <label class="menu-icon" for="menu-btn"><span class="navicon"></span></label> 
     <ul class="menu"> 
     <li><a href="#work">Our Work</a></li> 
     <li><a href="#about">About</a></li> 
     <li><a href="#careers">Careers</a></li> 
     <li><a href="#contact">Contact</a></li> 
     </ul> 
    </nav> 
<figure id="main-img"></figure> 

figure#main-img { 
    width: 100%; 
    position: relative; 
    overflow: hidden; 
    border-top: 1px solid #000000; 
    border-bottom: 1px solid #000000; 
    z-index: 10; 
    height: 200px; 
    background-color: red; 
} 
nav.header { 
    background-color: silver; 
    width: 100%; 
    float: left; 
    overflow: hidden; 
} 
.table { 
    display: table; 
    margin: 0 auto; 
} 
.header ul { 
    list-style: none; 
    position: relative; 
    float: left; 
    display: block; 
    left: 50%; 
    max-width: 1200px; 
    margin: 0; 
    padding: 0; 
} 
.header ul li { 
    position: relative; 
    right: 50%; 
    /*float: left; 
    display: inline-block;*/ 
} 
.header li a { 
    display: block; 
    padding: 1em; 
    text-decoration: none; 
    color: #000000; 
} 
.header li a:hover { 
    background-color: #B5B5B5; 
} 
.header .menu { 
    clear: both; 
    max-height: 0; 
    transition: max-height .2s ease-out; 
} 
.header .menu-icon { 
    cursor: pointer; 
    display: inline-block; 
    float: right; 
    padding: 28px 20px; 
    position: relative; 
    user-select: none; 
} 
.header .menu-icon .navicon { 
    background: #333; 
    display: block; 
    height: 2px; 
    position: relative; 
    transition: background .2s ease-out; 
    width: 18px; 
} 
.header .menu-icon .navicon:before, .header .menu-icon .navicon:after { 
    background: #333; 
    content: ''; 
    display: block; 
    height: 100%; 
    position: absolute; 
    transition: all .2s ease-out; 
    width: 100%; 
} 
.header .menu-icon .navicon:before { 
    top: 5px; 
} 
.header .menu-icon .navicon:after { 
    top: -5px; 
} 
.header .menu-btn { 
    display: none; 
} 
.header .menu-btn:checked ~ .menu { 
    max-height: 240px; 
} 
.header .menu-btn:checked ~ .menu-icon .navicon { 
    background: transparent; 
} 
.header .menu-btn:checked ~ .menu-icon .navicon:before { 
    transform: rotate(-45deg); 
} 
.header .menu-btn:checked ~ .menu-icon .navicon:after { 
    transform: rotate(45deg); 
} 
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before, .header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after { 
    top: 0; 
} 

@media only screen and (min-width: 750px) { 
.header li { 
    float: left; 
} 
.header li a { 
    padding: 20px 30px; 
} 
.header .menu { 
    clear: none; 
    /*float: right;*/ 
    max-height: none; 
} 
.header .menu-icon { 
    display: none; 
} 
} 

@media only screen and (max-width: 750px) { 
.header li a { 

    background-color: Silver; 
    opacity: 0.9; 
} 
.header ul li { 
    border-bottom: 1px solid #000000; 
    color: #000; 
} 
.header ul li:first-child { 
    border-top: 0px solid #000000; 
} 
.header ul { 
    width: 100%; 

} 
} 
@media only screen and (max-width: 480px) { 
nav.header { 

} 
} 

Answer 1

コードそれが動作しなくなった場合にはJSFiddleから（のみ関連CSS、HTMLは変更されませんでした）：

body { 
    width:100%; 
    margin:0; 
} 

figure#main-img { 
    width: 100%; 
    position: relative; 
    float:left; 
    overflow: hidden; 
    border-top: 1px solid #000000; 
    border-bottom: 1px solid #000000; 
    height: 300px; 
    background-color: red; 
    margin:58px 0 0 0; 
} 

nav.header { 
    background-color: silver; 
    opacity: 0.75; 
    position: absolute; 
    width: 100%; 
    top:0; 
    z-index:10; 
    float: left; 
    margin:0; 
    overflow:hidden; 
} 
.header .menu-icon { 
    padding: 28px 20px; 
} 

ここ

---

をすることができますJSFiddleですと連携。ここで

nav.header { 
    background-color: silver; 
    position: absolute; 
    width: 100%; 
    top:0; 
    z-index:10; 
    float: left; 
    margin:0; 
    overflow:hidden; 
} 

私は、絶対的位置を設定し、トップにそれを設定し、その後のz-indexがデフォルトよりも大きな数があることがわかります。

は、それが助けたアンドリュー・ホープ