css - 我的下拉菜单没有将我的内容下推？

Question

我创建了一个响应式下拉菜单。当屏幕变小时，我希望下拉菜单能够放下其他内容。我的代码不这样做。我试过使用 position: relatives/position: absolute 等来达到某种预期的结果，但没有这样的运气。我已经看到与此问题有关的其他类似问题，但它仍然没有帮助我。

这是我的代码片段。

$(document).ready(function() {
  $(".show-menu").click(function() {
    $("#menu").slideToggle();
  });
});

@charset "utf-8";
 * {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}
/* Uporabno za Sticky footer na koncu internetne strani */

html,
body {
  height: 100%;
}
body {
  padding-top: 30px;
  text-align: left;
  font-size: 100%;
  font-family: "Trebuchet MD", Arial, Helvetica, sans-serif;
}
/* Vse kar je v glavi internetne strani oziroma slika glave */

.header {
  width: 90%;
  margin: auto;
  padding-bottom: 10px;
}
.header img {
  width: 100%;
}
/* Konec glave internetne strani*/

/* Vse kar je v glavnem menuju internetne strani */

.full {
  background-color: #00528b;
  height: 70px;
  width: 85%;
  margin: auto;
  border-radius: 5px;
}
.mainheader {
  height: 70px;
  background-color: #00528b;
  border-radius: 5px;
}
.mainheader nav ul {
  height: 70px;
  width: 714px;
  margin: auto;
  z-index: 1000;
}
.mainheader nav ul ul.hidden {
  position: absolute;
}
/* Skrij podmenuje dokler jih ne potrebuješ */

.mainheader nav ul li ul {
  display: none;
}
/* Oblika podmenujev */

.mainheader nav ul li:hover ul li {
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  max-width: 200px;
}
.mainheader nav ul li:hover ul a {
  color: #000;
  font-size: 18px;
  background-color: #fff;
  padding: 5px;
}
/* Hover za povezave v podmenujih */

.mainheader nav ul li:hover ul a:hover {
  background-color: #777;
}
/* Pokaži podmenuje ko je potrebno */

/* + izberi vse .hidden in .hidden:hover takoj po .mainheader nav ul li a:hover */

.mainheader nav ul li a:hover + .hidden,
.hidden:hover {
  display: block;
}
/* Podmenuji se postavijo v vertikalo */

.mainheader nav ul li ul li {
  display: block;
  float: none;
}
.mainheader nav ul li ul li a {
  width: auto;
  min-width: 100px;
  padding: 0 20px;
  text-align: left;
}
.mainheader nav ul li {
  display: inline-block;
  float: left;
}
.mainheader nav a:link,
.mainheader nav a:visited {
  color: #fff;
  display: block;
  padding: 24.5px 6px 16px 5px;
  font-size: 18px;
}
.mainheader nav a:hover {
  color: #777;
}
/* Oblika show-menu in skrij ga po defoltu */

.show-menu {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 18px;
  color: #fff;
  padding: 24.5px 6px 16px 5px;
  text-decoration: none;
  text-align: center;
  display: none;
}
/* Skrij checkbox */

input[type=checkbox] {
  display: none;
}
/* Interaktivna menujska vrstica */

@media screen and (max-width: 853px) {
  /* Prikaži show-menu oziroma menujsko vrstico */
  input[type=checkbox]:checked ~ #menu {
    display: block;
  }
  .header {
    width: 100%;
  }
  .full {
    width: 95%;
  }
  /* Podmenuji se postavijo v linijo */
  nav ul {
    display: none;
  }
  /* Oblika pod podmenujev */
  .mainheader nav ul {
    width: 100%;
  }
  .mainheader nav ul li ul.hidden li a {
    width: auto;
  }
  .mainheader nav ul li a:hover + .hidden,
  .hidden:hover {
    width: 200px;
  }
  /* Ustvari vertikalne presledke */
  nav li {
    background: #00528b;
  }
  nav li a {
    text-align: center;
  }
  /* Ustvari vse povezave v popolni širini */
  nav ul li {
    width: 100%;
    text-align: center;
  }
  nav ul li ul li {
    width: auto;
    background-color: #777;
    margin-top: 0px;
  }
  /* Pokaži 'show menu' povezave */
  .show-menu {
    display: block;
    cursor: pointer;
  }
  /* Oblika podmenuja, ki omogoča slideToggle */
  li.bottom-radius {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
  }
  #menu {
    height: 494px;
    border-top: 1px solid #fff;
  }
}
/* Konec glavnega menuja internetne strani */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="full">
  <header class="mainheader">
    <nav id="mainheader">

      <label for="show-menu" class="show-menu">Menijska vrstica</label>
      <input type="checkbox" id="show-menu" name="button">

      <ul id="menu">
        <li><a href="#">Domov</a>
        </li>
        <li><a href="#">Novice</a>
          <ul class="hidden">
            <li><a href="#">Aktualno</a>
            </li>
            <li><a href="#">Arhiv</a>
            </li>
          </ul>
        </li>
        <li><a href="#">Predstavitev</a>
          <ul class="hidden">
            <li><a href="#">Karate zgodovina</a>
            </li>
            <li><a href="#">O klubu</a>
            </li>
            <li><a href="#">Organi</a>
            </li>
            <li><a href="#">Dokumenti</a>
            </li>
          </ul>
        </li>
        <li><a href="#">Člani kluba</a>
          <ul class="hidden">
            <li><a href="#">Registrirani tekmovalci</a>
            </li>
            <li><a href="#">Vsi člani kluba</a>
            </li>
          </ul>
        </li>
        <li><a href="#">Register pasov</a>
          <ul class="hidden">
            <li><a href="#">Kyu pasovi</a>
            </li>
            <li><a href="#">Dan pasovi</a>
            </li>
          </ul>
        </li>
        <li><a href="#">Trenerji</a>
          <ul class="hidden">
            <li><a href="#">Shihan</a>
            </li>
            <li><a href="#">Sensei</a>
            </li>
          </ul>
        </li>
        <li><a href="#">Galerija</a>
          <ul class="hidden">
            <li><a href="#">Slike</a>
            </li>
            <li><a href="#">Posnetki</a>
            </li>
          </ul>
        </li>
        <li class="bottom-radius"><a href="#">Sponzorji</a>
        </li>
      </ul>
    </nav>
  </header>
</div> 
<div>
  <h1>Only for preview of this exeple</h1>
</div>

我希望这是一个简单的解决方案。谢谢。

Answer 1

发生这种情况是因为您明确设置了页眉的高度。从 .full 和 .mainheader CSS 规则中删除 height: 70px。