0
body {
background-color: #313449;
font-family: 'Open Sans', sans-serif;
}
#menu-toggle {
z-index: 1;
}
/* Hidden Checkbox */
#menu-toggle input {
opacity: 0;
width: 40px;
height: 40px;
z-index: 2;
/* checkbox on top */
position: absolute;
top: 0;
left: 0;
}
#menu-toggle input:checked {
transition: all 0.3s ease;
}
/* Hamburger */
#menu-toggle span {
display: block;
width: 30px;
border: #ffffff 2px solid;
margin-top: 5px;
border-radius: 2px;
transition: all 0.3s ease;
transform-origin: 0 0;
}
#menu-toggle input:checked ~ span {
/* all bars - top bar */
transform: rotate(45deg) translate(-1px, -3px);
border-color: #000000;
}
#menu-toggle input:checked ~ span:nth-child(3) {
/* middle bar */
transform: scale(0, 0);
opacity: 0;
}
#menu-toggle input ~ span:nth-child(4) {
/* bottom bar */
transform-origin: 0 100%;
}
#menu-toggle input:checked ~ span:nth-child(4) {
transform: rotate(-45deg) translate(0, 2px);
}
/* Menu Content */
#menu-toggle input:checked ~ #menu {
/* display menu */
left: 0;
}
#menu-toggle #menu {
background-color: grey;
background-color: rgba(255, 255, 255, 1);
width: 100px;
height: auto;
padding: 30px 30px;
text-align: center;
position: absolute;
top: 0;
left: -160px;
margin-top: 0;
transition: all 0.3s ease;
}
#menu-toggle li {
list-style: none;
margin: 30px 0;
}
#menu-toggle a li {
color: #000000;
text-decoration: none;
transition: color 0.3s ease;
}
#menu-toggle a li:hover {
color: red;
transition: color 0.3s ease;
}<nav role="navigation">
<div id="menu-toggle">
<input type="checkbox" />
<span></span>
<span></span>
<span></span>
<ul id="menu">
<a href="#">
<li>Home</li>
</a>
<a href="#">
<li>Contact</li>
</a>
<a href="#">
<li>Sign in</li>
</a>
</ul>
</div>
</nav>
<section>
<h1>Title</h1>
<p>
Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nam commodo suscipit quam. Donec sodales sagittis magna.
<br />
<br />Nulla neque dolor, sagittis eget, iaculis quis, molestie non, velit. Donec vitae sapien ut libero venenatis faucibus. In hac habitasse platea dictumst.
<br />
<br />Cras ultricies mi eu turpis hendrerit fringilla. Morbi mollis tellus ac sapien. Nam commodo suscipit quam.
<br />
<br />Vestibulum turpis sem, aliquet eget, lobortis pellentesque, rutrum eu, nisl. Phasellus magna. Phasellus nec sem in justo pellentesque facilisis.
</p>
</section>こんにちは、
私は私のバーガーメニューに苦しんでいます。私の#menu divの下に隠されていて、なぜそれが見つからないのですか？私はスパンにZ-インデックスを試しましたが、動作していません。
私はここで間違っていますか？
私の2スパンと3スパンがnth-child（3）と（4）である理由を理解できませんか？このように働いていますが、なぜそれが（2）と（3）ではないのか理解できません。
ありがとうございます。
uはあなたがしたいことを正確にそれを何であるかを説明してくださいできますか？ – mrid
バーガーをクリックすると、十字アイコンになり、白いメニューの後ろに表示されます。それは正面にとどまるべきです。 – Tom
はあなたの '＃menu-toggle span'要素に' z-index：10000'を設定します。問題を解決します。ペンをチェックしてください[http://codepen.io/anon/pen/bBNRYg](http://codepen.io/anon/pen/bBNRYg） – Manjunath