0
我創建了一個響應下拉菜單。當屏幕變小時，我想讓下拉菜單放下其他內容。我的代碼不這樣做。我嘗試過使用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>我希望它是簡單的解決方案。謝謝。
只需添加相對位置 - .mainheader nav ul ul.hidden {position：relative;} –
我已經試過了，它什麼都不做。它仍然不會推動我的其他內容。 –