Warum erscheint das Dropdown-Menü nicht über Inhalt?

Ich habe ein Dropdown-Menü, das nicht über den Rest des Inhalts angezeigt wird. Ich habe die Position auf absolut und den Z-Index auf 99 und kein Glück gesetzt. Irgendwelche Ideen, wie man es auf den Rest der Website legen kann?Warum erscheint das Dropdown-Menü nicht über Inhalt?

<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

Quelle

2016-05-29 NJeffries

Wo ist das Dropdown-Menü? Suchen Sie nach einer Möglichkeit, die Menüelemente am oberen Rand als Dropdown-Menü anstatt nacheinander anzuzeigen? – RST

Entschuldigung. Sie müssen die Größe des Codepens ändern, um es mobil zu machen. Wenn Sie auf das Hamburgermenü klicken, öffnet sich das Nav aber hinter allem nicht über den Inhalt. – NJeffries

In Ihrer @ media Abfrage ändern Sie

nav { 
    position: relative; 
}

nav { 
    position: absolute; 
}

Dies wird Ihr Menü oben halten.

Quelle

2016-05-30 05:25:27 RST

Großartig. Ich schätze die Hilfe. – NJeffries

Ich denke, Sie so etwas wie dieses verwenden sollten

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

es nur einen Unterschied zu arbeiten, ist ich eine Schließbügel in

$("nav > ul").toggle();

hinzugefügt haben

Quelle

2016-05-29 10:38:53 arclite

Warum erscheint das Dropdown-Menü nicht über Inhalt?

Antwort

Verwandte Themen