0
レスポンシブなドロップダウンメニューを作成しました。画面が小さくなると、ドロップダウンメニューに他のコンテンツを配置します。私のコードはそれをしません。私は、ポジション：親戚/ポジション：絶対などを使って試してみましたが、何らかの望ましい結果を達成しましたが、そのような運はありません。私はこの問題に関連する他の同様の質問を見たが、それでも私を助けなかった。私のドロップダウンメニューでコンテンツが押し出されませんか？
これは私のコードのスニペットです。
$(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 {位置：相対;} –
私はそれを試したが、何もしない。それでも私の他のコンテンツを押し下げるわけではありません。 –