CSS网格菜单下拉问题

时间：2019-03-11 13:04:47

标签： html css menu css-grid

我正在为当前的问题而苦苦挣扎：单击时出现的下拉菜单隐藏在第3行和第4行的图像内容后面，我希望它将内容向下推。我已经到这堵墙了！

非常感谢您提供帮助。

 @charset "UTF-8";
    /* CSS Document */
    *,
    *::after,
    *::before {
      margin: 0;
      padding: 0;
      box-sizing: inherit; 
    }

    html {
      box-sizing: border-box;
        font-family: Helvetica;

    }



    .gallery{
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: repeat(12, 1fr);
        grid-gap: 1rem;
        background: #D8D2B0;
        width: 90%;
        height: 100vh;
        margin: 0 auto;
    }

    #header{
        grid-column: span 12;
        grid-row: 1;
        background: #43686A;

    }

    #nav{
        grid-column: span 12;
        grid-row: 2;
        max-height: 100px;


    }

    .pic1{
        grid-column:1/4;
        grid-row:3;


    }

    .pic2{
        grid-column: 4/7;
        grid-row: 3;
    }

    .pic3{
        grid-column: 7/10;
        grid-row: 3;

    }

    .pic4{
        grid-column: 10/13;
        grid-row: 3;
    }

    .pic5{
        grid-column: 1/4;
        grid-row: 4;
    }

    .pic6{
        grid-column: 4/7;
        grid-row: 4;
    }

    .pic7{
        grid-column: 7/10;
        grid-row: 4;
    }

    .pic8{
        grid-column: 10/13;
        grid-row: 4;
    }



    img{
        width: 100%;
        height: 100%;
        max-height: 100%;

    }



    /* [MENU] */
    #page-nav {
      background: #000;

    }
    #page-nav label, #page-nav ul, #page-nav li {
      display: inline-block;
    }

    /* [HAMBURGER - HIDDEN ON BIG SCREENS] */
    #page-nav label, #hamburger {
      display: none;
    }
    #page-nav label {
      color: #fff;
      background: #a02620;
      font-style: normal;
      font-size: 1.2em;
      padding: 10px;
    }

    /* [MENU ITEMS] */
    #page-nav ul {
      list-style-type: none;
      margin: 0;
      padding: 0; 
    }
    #page-nav ul li {
      padding: 10px;
      box-sizing: border-box;
    }
    #page-nav ul li a {
      color: #fff;
      text-decoration: none;
    }

    /* [ON SMALL SCREENS] */
    @media screen and (max-width: 768px){
      /* [SHOW HAMBURGER] */
      #page-nav label {
        display: inline-block;
      }

      /* [BREAK DOWN MENU INTO VERTICAL] */
      #page-nav ul li {
        display: block;
            z-index: 10
      }
      #page-nav ul li {
        border-top: 1px solid #333;
      }

      /* [SHOW/HIDE MENU ON CHECKBOX CLICK] */
      #page-nav ul {
        display: none;

      }
      #page-nav input:checked ~ ul {
        display: block;
      }
    }
<div class="gallery">

  <div id="header"></div>

  <div id="nav">

    <!-- [NAVIGATION BAR] -->
    <nav id="page-nav">


      <!-- [THE HAMBURGER] -->
      <label for="hamburger">&#9776;</label>
      <input type="checkbox" id="hamburger" />



      <!-- [MENU ITEMS] -->
      <ul>
        <li><a href="file:///ian B/All Web design/Intro to Web_2018/template/index.html">Home</a></li>
        <li><a href="file:///ian B/All Web design/Intro to Web_2018/template/about.html">About</a></li>
        <li><a href="file:///ian B/All Web design/Intro to Web_2018/template/tech.html">Tech</a></li>
        <li><a href="file:///ian B/All Web design/Intro to Web_2018/template/games.html">Games</a></li>
        <li><a href="file:///ian B/All Web design/Intro to Web_2018/template/reviews.html">Reviews</a></li>
      </ul>
    </nav>


  </div>





  <div class="pic1"><img src="images/DSC_0032.jpg" alt="" /></div>
  <div class="pic2"><img src="images/DSC_0021.jpg" alt="" /></div>
  <div class="pic3"><img src="images/DSC_0074.jpg" alt="" /></div>
  <div class="pic4"><img src="images/DSC_0063.jpg" alt="" /></div>
  <div class="pic5"><img src="images/DSC_0034.jpg" alt="" /></div>
  <div class="pic6"><img src="images/DSC_0124.jpg" alt="" /></div>
  <div class="pic7"><img src="images/DSC_0060.jpg" alt="" /></div>
  <div class="pic8"><img src="images/DSC_0033.jpg" alt="" /></div>


</div>

1 个答案:

答案 0 :(得分：0)

只需将z-index添加到#nav。

@charset "UTF-8";

/* CSS Document */

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
  font-family: Helvetica;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(12, 1fr);
  grid-gap: 1rem;
  background: #D8D2B0;
  width: 90%;
  height: 100vh;
  margin: 0 auto;
}

#header {
  grid-column: span 12;
  grid-row: 1;
  background: #43686A;
}

#nav {
  grid-column: span 12;
  grid-row: 2;
  max-height: 100px;
  z-index: 2;
}

.pic1 {
  grid-column: 1/4;
  grid-row: 3;
}

.pic2 {
  grid-column: 4/7;
  grid-row: 3;
}

.pic3 {
  grid-column: 7/10;
  grid-row: 3;
}

.pic4 {
  grid-column: 10/13;
  grid-row: 3;
}

.pic5 {
  grid-column: 1/4;
  grid-row: 4;
}

.pic6 {
  grid-column: 4/7;
  grid-row: 4;
}

.pic7 {
  grid-column: 7/10;
  grid-row: 4;
}

.pic8 {
  grid-column: 10/13;
  grid-row: 4;
}

img {
  width: 100%;
  height: 100%;
  max-height: 100%;
}


/* [MENU] */

#page-nav {
  background: #000;
}

#page-nav label,
#page-nav ul,
#page-nav li {
  display: inline-block;
}


/* [HAMBURGER - HIDDEN ON BIG SCREENS] */

#page-nav label,
#hamburger {
  display: none;
}

#page-nav label {
  color: #fff;
  background: #a02620;
  font-style: normal;
  font-size: 1.2em;
  padding: 10px;
}


/* [MENU ITEMS] */

#page-nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#page-nav ul li {
  padding: 10px;
  box-sizing: border-box;
}

#page-nav ul li a {
  color: #fff;
  text-decoration: none;
}


/* [ON SMALL SCREENS] */

@media screen and (max-width: 768px) {
  /* [SHOW HAMBURGER] */
  #page-nav label {
    display: inline-block;
  }
  /* [BREAK DOWN MENU INTO VERTICAL] */
  #page-nav ul li {
    display: block;
    z-index: 10
  }
  #page-nav ul li {
    border-top: 1px solid #333;
  }
  /* [SHOW/HIDE MENU ON CHECKBOX CLICK] */
  #page-nav ul {
    display: none;
  }
  #page-nav input:checked~ul {
    display: block;
  }
}
<div class="gallery">

  <div id="header"></div>

  <div id="nav">

    <!-- [NAVIGATION BAR] -->
    <nav id="page-nav">


      <!-- [THE HAMBURGER] -->
      <label for="hamburger">&#9776;</label>
      <input type="checkbox" id="hamburger" />



      <!-- [MENU ITEMS] -->
      <ul>
        <li><a href="file:///ian B/All Web design/Intro to Web_2018/template/index.html">Home</a></li>
        <li><a href="file:///ian B/All Web design/Intro to Web_2018/template/about.html">About</a></li>
        <li><a href="file:///ian B/All Web design/Intro to Web_2018/template/tech.html">Tech</a></li>
        <li><a href="file:///ian B/All Web design/Intro to Web_2018/template/games.html">Games</a></li>
        <li><a href="file:///ian B/All Web design/Intro to Web_2018/template/reviews.html">Reviews</a></li>
      </ul>
    </nav>


  </div>





  <div class="pic1"><img src="images/DSC_0032.jpg" alt="" /></div>
  <div class="pic2"><img src="images/DSC_0021.jpg" alt="" /></div>
  <div class="pic3"><img src="images/DSC_0074.jpg" alt="" /></div>
  <div class="pic4"><img src="images/DSC_0063.jpg" alt="" /></div>
  <div class="pic5"><img src="images/DSC_0034.jpg" alt="" /></div>
  <div class="pic6"><img src="images/DSC_0124.jpg" alt="" /></div>
  <div class="pic7"><img src="images/DSC_0060.jpg" alt="" /></div>
  <div class="pic8"><img src="images/DSC_0033.jpg" alt="" /></div>


</div>

相关问题
最新问题