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/

我希望横幅图片遵循“监控”图片，也就是说，将横幅广告和监视器图像放在一起，菜单是正确的，我只想修复子菜单，即掩盖横幅广告。

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示例中对其进行了测试，并且它确实满足您的要求。

如何解决：我的背景在菜单下

1 个答案: