CSS Hamburger 菜单在下一个 div 顶部打开

Question

我创建了一个仅使用 CSS 的汉堡包菜单，一切似乎都正常，除了当我尝试打开它时，菜单元素出现在 HTML 代码中的下一个元素（下一个 div）的顶部。完整代码在这里：https://codepen.io/Cilvako/pen/wjwmJP

我觉得我错过了什么，但我无法弄清楚我做错了什么。

  <header>
        <div class="nav">
            <h1>Zero Gravity</h1>

                 <label for="toggle">&#9776</label>
                 <input type="checkbox" id="toggle"/>

          <div class="menu">
                <a href="#">About Us</a>
                <a href="#">Contact</a>
                <a href="#">Blog</a>
                <a href="#"><span>Free Trial</span></a>
          </div>
        </div>
    </header>

   <div class="main_content">
       <p>Bacon ipsum dolor amet short ribs tri-tip porchetta rump leberkas cupim shank turkey. Biltong hamburger jerky, ball tip sausage cupim tongue t-bone leberkas. Tri-tip porchetta jerky frankfurter shankle kevin andouille tail beef chuck swine sirloin strip steak corned beef. Meatloaf ham hock landjaeger kielbasa ribeye t-bone.</p>

   </div>

Answer 1

我唯一做的就是将float: left; 添加到班级 --> menu 。

在这种情况下它会占据整个宽度空间，也不会重复菜单边框线。

html, body {
  width: 100%;
  heigth: 100%;
  margin: 0;
  box-sizing: border-box;
}

html {
  font-family: "Helvetica", sans-serif;
}

.nav {
  border-bottom: 1px solid #00b3b3;
  text-align: right;
  height: 80px;
  line-height: 80px;

}

.nav h1 {
  float: left;
  margin: 0 0 0 10px;
  font-size: 20px;
  color: #00b3b3;
  
}

.menu {
  float: left;
  margin: 0 30px 0 0;
  text-align: center;
  width: 100%;
  display: none;
  clear: both;
}

.menu a {
  text-decoration: none;
  color: #00b3b3;
  margin: 0;
  display: block;
  line-height: 80px;
  border-bottom: 1px solid #00b3b3;
}

label {
  display: block;
  margin: 0 40px 0 0;
  font-size: 26px;
  line-height: 80px;
  cursor: pointer;
  width: 26px;
  float: right;
}

#toggle {
  display: none;
}

#toggle:checked + .menu {
    display: block;
  }

.main_content {
  clear: both;
  max-width: 80%;
  margin: auto;
  padding: 30px;
}

<header>
			<div class="nav">
        <h1>Zero Gravity</h1>
  
 					 <label for="toggle">&#9776</label>
  					 <input type="checkbox" id="toggle"/>
  
			  <div class="menu">
			        <a href="#">About Us</a>
			        <a href="#">Contact</a>
			        <a href="#">Blog</a>
			        <a href="#"><span>Free Trial</span></a>
			  </div>
		    </div>
		</header>

<div class="main_content">
  <p>Bacon ipsum dolor amet short ribs tri-tip porchetta rump leberkas cupim shank turkey. Biltong hamburger jerky, ball tip sausage cupim tongue t-bone leberkas. Tri-tip porchetta jerky frankfurter shankle kevin andouille tail beef chuck swine sirloin strip steak corned beef. Meatloaf ham hock landjaeger kielbasa ribeye t-bone.</p>
    </br>
  <p>Jerky doner leberkas corned beef ham pork chop. T-bone frankfurter meatloaf beef, tail pancetta brisket spare ribs ribeye boudin jowl pork chop swine turducken venison. Pancetta cow venison tail tenderloin alcatra buffalo boudin capicola salami porchetta swine. Pork loin shankle ground round brisket burgdoggen bresaola capicola, chicken porchetta venison. Drumstick tenderloin porchetta, alcatra kielbasa rump picanha venison doner. Kevin ribeye capicola, chicken prosciutto strip steak meatball. Porchetta sausage shank, meatball andouille ham hock jowl t-bone. Spare ribs ball tip pancetta, frankfurter corned beef kielbasa shankle. Beef ribs porchetta t-bone capicola tail jowl flank rump drumstick. Bresaola filet mignon shoulder, prosciutto salami kielbasa cow chuck tail venison leberkas tenderloin.</p>
    </br>
  <p>Biltong short loin porchetta meatloaf pancetta. Kevin swine ham shankle, short ribs corned beef bresaola. Cupim pork kielbasa pork loin hamburger ribeye. Ham hamburger short loin chuck. Leberkas alcatra t-bone frankfurter kielbasa pastrami turducken. Hamburger shoulder swine capicola, brisket alcatra meatloaf rump chuck shank salami cupim kevin porchetta burgdoggen. Short ribs short loin tri-tip burgdoggen. Kevin ribeye capicola, chicken prosciutto strip steak meatball. Porchetta sausage shank, meatball andouille ham hock jowl t-bone. Spare ribs ball tip pancetta, frankfurter corned beef kielbasa shankle. Beef ribs porchetta t-bone capicola tail jowl flank rump drumstick. Bresaola filet mignon shoulder, prosciutto salami kielbasa cow chuck tail venison leberkas tenderloin.</p>
  

</div>

Answer 2

这完全取决于您希望菜单的功能。您使用 CSS 显示它而不是使用任何 JS，我认为它非常好且轻量级。在此基础上，我建议您将菜单设置为简单地位于现有内容之上（因为它确实如此）并具有纯色背景颜色（因为它目前没有）。您可以使用background-color CSS 属性在.menu 上设置背景颜色，并且您还需要添加position: relative 以确保它按您想要的方式显示。

我已经为您制作了一个 codepen 以查看它的实际效果： http://jsbin.com/remadowagu/edit?html,css,output

如果您不想在内容顶部显示菜单，而是希望您的内容向下移动到菜单下方，那么上述皮特的回答将为您解决这个问题。不过，我个人的偏好是用菜单覆盖页面内容，而不是向下推。

Answer 3

您只需将menu 中的元素组合起来，例如menu-a，然后在CSS 代码中使用display: inline-block。

菜单代码应该有点像这样：

<div class="menu">
  <a class="menu-a" href="#">About Us</a>
  <a class="menu-a" href="#">Contact</a>
  <a class="menu-a" href="#">Blog</a>
  <a class="menu-a" href="#"><span>Free Trial</span></a>
</div>

并将以下内容添加到 CSS 代码中：

menu-a {
  display: inline-block
}