2016-05-29 14 views
0

他のコンテンツには表示されないドロップダウンメニューがあります。私は絶対的な位置に設定して、Zインデックスを99に設定しました。どのようにサイトの残りの部分の上に横たわるためにそれを得るための任意のアイデア?ドロップダウンメニューがコンテンツに表示されないのはなぜですか?

<body> 
    <header> 
     <div class="container"> 
      <h1 class="logo">Relaxr</h1> 

      <nav> 
       <a href='#'><span class="hamburger"></span></a> 
       <ul> 
        <li><a href="index.html">Home</a></li> 
        <li><a href="#">About</a></li> 
        <li><a href="#">Contact</a></li> 
        <li><a href="blog.html">Blog</a></li> 
       </ul> 
      </nav> 
     </div> 
    </header> 
    <section id="main"> 
     <div class="container"> 

nav { 
    position: relative; 
} 
nav ul { 
    display: none; 
} 
header { 
    margin-left: -20px; 
    margin-right: -20px; 
} 
body { 
    margin-left: 20px; 
    margin-right: 20px; 
} 
.container { 
    width: 100%; 
    margin: 0; 
} 
#main { 
    margin-top: 10px; 
} 
header nav ul li { 
    display: block; 
    margin-right: 20px; 
    margin: 0 20px 0 0; 
} 
.hamburger { 
    margin-top: 5px; 
    margin-right: 80px; 
    margin-bottom: 20px; 
    float:right; 
    position: relative; 
    display: inline-block; 
    width: 1.5em; 
    height: 0.74em; 
    border-top: 0.2em solid #fff; 
    border-bottom: 0.2em solid #fff; 
} 
.hamburger:before { 
    content: ""; 
    position: absolute; 
    top: 0.9em; 
    left: 0px; 
    width: 100%; 
    border-top: 0.2em solid #fff; 
} 
nav ul {  
    position: absolute; 
    left: 0; top: 100%; 
    width: 100%; 
    background-color: black; 
    z-index: 99; 

Codepen: http://codepen.io/kiddigit/pen/wWvPJm

+0

ドロップダウンメニューはどこですか?あなたは行の代わりにドロップダウンメニューとして上部にメニュー項目を表示する方法を探していますか? – RST

+0

申し訳ありません。コードサイズを変更してモバイルサイズにする必要があります。ハンバーガーメニューをクリックすると、ナビゲーションは開きますが、コンテンツの上にないすべてのものの後ろに表示されます。 – NJeffries

答えて

0

@mediaクエリの変更で

nav { 
    position: relative; 
} 

nav { 
    position: absolute; 
} 

にこれが一番上にあなたのメニューを維持します。

+0

私は助けに感謝します。 – NJeffries

0

私は

$("nav > ul").toggle(); 
に閉じ括弧を追加しました一つだけ違いがあるあなたは

$(".hamburger").click(function(e){ 
    $("nav > ul").toggle(); 
}); 

を動作するように、このようなものを使用すべきだと思います

関連する問題