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; - ＆gt; menu。

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 2

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

我已经让你成为了一个可靠的代码： http://jsbin.com/remadowagu/edit?html,css,output

如果您不希望在您的内容之上显示您的菜单，并希望您的内容向下移动到菜单下方，那么Pete的上述答案将为您解决此问题。但是，我个人的偏好是使用菜单覆盖页面内容而不是将其压低。

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
}

CSS Hamburger菜单在下一个div之上打开

3 个答案: