他のコンテンツには表示されないドロップダウンメニューがあります。私は絶対的な位置に設定して、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
ドロップダウンメニューはどこですか?あなたは行の代わりにドロップダウンメニューとして上部にメニュー項目を表示する方法を探していますか? – RST
申し訳ありません。コードサイズを変更してモバイルサイズにする必要があります。ハンバーガーメニューをクリックすると、ナビゲーションは開きますが、コンテンツの上にないすべてのものの後ろに表示されます。 – NJeffries