时间戳

首页 > 解决方案 > 如何修复：我的背景在菜单下

html - 如何修复：我的背景在菜单下

问题描述

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

过去，我尝试过多种背景，但它不起作用。

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图像跟随“monitor”图像，即把banner和monitor图像一起推送，并且菜单是正确的，我只想修复子菜单，即覆盖banner。

点击后的子菜单

标签： htmlcss

解决方案

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

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 示例中对其进行了测试，并且我相信您希望它执行此操作。

推荐阅读