0
にコンテナbeind浮いている私はハンバーガーメニューを作成しようとしていますし、私が行うとき、私はそれをmargin: 0;を与えてみましたし、何もなく、すべてがそうですfloat: none;私のコンテンツは、メディアクエリー
を与えるとき、私の.nav-listはコンテナの後ろに行きます働く私はそれを開き、コンテナの高さを低くし、閉じたときにコンテナの高さを上げ、メニューバーの高さを下げようとしています。ここで
は私のコードで、残りはこのCodepenである： https://codepen.io/anon/pen/jBBdWv
HTML：
<div id="jobs-popup">
<img id="x-icon1" src="Pictures/web%20x%20icon%20white.png">
<div class="jobs-content">
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
...
</div>
</div>
<!--End Section for Jobs Popup -->
<!-- Section for contact popup -->
<div id="contact-popup">
<img id="x-icon2" src="Pictures/web%20x%20icon%20white.png">
<div id="contact-content">
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
...
</div>
</div>
<!-- End Section for Contact Popup -->
<!-- Section for Press popup -->
<div id="press-popup">
<img id="x-icon3" src="Pictures/web%20x%20icon%20white.png">
<div id="press-content">
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
...
</div>
</div>
<!-- End section Press -->
<!-- Section for legal popup -->
<div id="legal-popup">
<img id="x-icon4" src="Pictures/web%20x%20icon%20white.png">
<div id="legal-content">
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
...
</div>
</div>
<!-- End section Legal -->
<!-- Section for Support -->
<div id="support-popup">
<img id="x-icon5" src="Pictures/web%20x%20icon%20white.png">
<div id="support-content">
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
...
</div>
</div>
<center>
<div id="top-bar">
<a class="burger-nav"></a>
<div id="nav-bar">
<ul>
<a href="#" id="jobs" class="test">
<li class="nav-list" id="job-under">Jobs</li>
</a>
<a href="#" id="contact" class="test">
<li class="nav-list" id="contact-under">Contact</li>
</a>
<a href="#" id="press" class="test">
<li class="nav-list" id="press-under">Press</li>
</a>
<a href="#" id="legal" class="test">
<li class="nav-list" id="legal-under">Legal</li>
</a>
<a href="#" id="support" class="test">
<li class="nav-list" id="support-under">Support</li>
</a>
</ul>
</div>
</div>
<div id="container">
<ul id="menu"></ul>
<h1 id="name">Touch</h1>
<ul class="bubbles">
<li id="firstCircle"></li>
<li id="secondCircle"></li>
<li id="thirdCircle"></li>
<li id="fourthCircle"></li>
<li id="fifthCircle"></li>
<li id="sixthCircle"></li>
</ul>
</div>
</center>
あなたのHTMLは無効です。あなたは 'center'を使うべきではなく、' .nav-list'には 'div> ul> a> li'があります。 'a'は' ul'の直接の子ではありません。 'a'と' li'を 'div> ul> li> a'のように入れ替える必要があります –
あなたはこれを見ていますか？ – Swiftor277
あなたのコードで "center"を検索し、私のコメントを読んだ場合、 '' .nav-list'で 'div> ul> a> li'" .... so、 '' .nav-リスト。 –