html - 如何修复 : my background is under the menu

Question

我正在制作一个网站，我想做一个不应该掩盖我的背景的子菜单。如何解决？

过去，我尝试过多个后台，但没有用。

HTML

<nav>
   <label for="show-menu" class="show-menu">Menu</label>
   <input type="checkbox" id="show-menu" role="button">
  <ul id="menu">
    <li ><a class="current" href="#">Home</a></li>
    <li><a href="#">Sobre</a></li>
    <li><a href="#">Contato</a></li>
  </ul>
</nav>
<!-- Showcase -->
<section id="showcase">
  <div class="monitor"><img src="images/monitor.png" alt="monitor"></div>
  <!-- <div class="front"><img src="images/front-end.jpg" alt="front-end"> 
  </div> -->      
</section>

这里是 css:https://jsfiddle.net/enzoap/84hu0m3s/2/

我希望横幅图像跟随“监视器”图像， 也就是把banner和监控图像一起推，菜单是正确的，我只想修复子菜单，也就是把banner遮住了。

The sub-menu after click

Answer 1

您的示例最简单的解决方案是更改此样式:

input[type=checkbox]:checked ~ #menu {
  display: block;
}

为此:

input[type=checkbox]:checked ~ #menu {
  display: inline-block; // This is the setting on the menu before `display: none` is set, so we reset it to this when the menu is displayed.
  width: 100%; // This could also be placed into the `ul` styles
}

老实说，我不是 100% 确定为什么会这样，但我在你的 JSFiddle 示例中测试了它，它做了我相信你想要它做的事情。