как исправить: мой фон находится в меню

Вопрос задан: 8 месяцев назад Последняя активность: 8 месяцев назад
up 0 down

Я делаю сайт, и я хочу сделать подменю, которые не должны покрывать вверх свой фон. Как это исправить?

В прошлом, я пытался несколько фон, но он не работает.

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/

Я ожидаю, что изображение баннера, чтобы следовать «контролировать» изображение, то есть, нажмите на баннер и контролировать изображение вместе, а меню правильно, я только хочу, чтобы установить в подменю, то есть сокрытие баннер.

Подменю после щелчка

1 ответ

up 0 down accepted

Самое простое решение для вашего примера, чтобы изменить этот стиль:

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 примере, и это то, что я верю, что вы хотите, чтобы это сделать.