我正在创建一个带有汉堡菜单的网站。单击按钮时会展开子菜单。一切都按照它应该的方式进行，但当我展开子菜单时，菜单的其余部分不会向下移动，事情开始重叠。我希望如果展开子菜单，则菜单的其余部分向下移动。我该如何做到这一点？我在这个jsfiddle中将问题降到了最低：https://jsfiddle.net/TheBB23/8nsuhjav/
请记住，jsfiddle的底部是以下脚本：
<script>
var acc = document.getElementsByClassName("expandsubmenu");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
</script>
我感谢你的帮助。
问题出在CSS中，部分原因是HTML的结构方式。在打开body标记之前，您拥有的两个div是不必要的，我建议您将它们放在正文中(如果您真的想在代码中使用它们(。另一方面，你有li，但没有父级ulHTML5可以原谅我，但为什么不把div和类mobilemenuitems改为ul，然后做这样的事情：
<div id="BurgerSpace">
<div class="header">
<div class="mobilemenuspace">
<ul class="mobilemenuitems">
<li>
<a href="?module=start">CLUB</a>
<button class="expandsubmenu">
<div class="circle-plus closed">
<div class="circle">
<div class="horizontal"></div>
<div class="vertical"></div>
</div>
</div>
</button>
<ul class="menulist">
<li class="menulevel1">
<a class=" " href="?module=*Ueber-Uns">�ber uns</a>
</li>
<li class="menulevel1">
<a class=" " href="?module=*Mitgliedsantrag"
>Mitgliedschaft</a
>
</li>
<li class="menulevel1">
<a class=" " href="?module=*Vorstand">Vorstand</a>
</li>
<li class="menulevel1">
<a class=" " href="?module=*Kontakt">Kontakt</a>
</li>
<li class="menulevel1">
<a class=" " href="?module=*Gastronomie">Gastronomie</a>
</li>
<li class="menulevel1">
<a class=" " href="?module=*Partner">Partner</a>
</li>
</ul>
</li>
<li>
<a href="?module=*Hockey">HOCKEY</a>
<button class="expandsubmenu">
<div class="circle-plus closed">
<div class="circle">
<div class="horizontal"></div>
<div class="vertical"></div>
</div>
</div>
</button>
<ul class="menulist">
<li class="menulevel1">
<a class=" " href="?action=*1-Herren">1. Herren</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=*1-Damen">1. Damen</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=*Hockey-Erwachsene">Erwachsene</a>
</li>
<li class="menulevel1">
<a class=" " href="#"
>Jugend <span class="fa arrow"></span
></a>
<ul class="menulist">
<li class="menulevel2">
<a class=" " href="?action=*Hockey-Jugend">Jugend</a>
</li>
<li class="menulevel2">
<a class=" " href="?action=*mja">M�nnliche Jugend A</a>
</li>
<li class="menulevel2">
<a class=" " href="?action=*mjb">M�nnliche Jugend B</a>
</li>
<li class="menulevel2">
<a class=" " href="?action=*kna">A-Knaben</a>
</li>
<li class="menulevel2">
<a class=" " href="?action=*knb">B-Knaben</a>
</li>
<li class="menulevel2">
<a class=" " href="?action=*knc">C-Knaben</a>
</li>
<li class="menulevel2">
<a class=" " href="?action=*knd">D-Knaben</a>
</li>
<li class="menulevel2">
<a class=" " href="?action=*kne">E-Knaben</a>
</li>
<li class="menulevel2">
<a class=" " href="?action=*wja">Weibliche Jugend A</a>
</li>
<li class="menulevel2">
<a class=" " href="?action=*wjb">Weibliche Jugend B</a>
</li>
<li class="menulevel2">
<a class=" " href="?action=*maa">A-M�dchen</a>
</li>
<li class="menulevel2">
<a class=" " href="?action=*mab">B-M�dchen</a>
</li>
<li class="menulevel2">
<a class=" " href="?action=*mac">C-M�dchen</a>
</li>
<li class="menulevel2">
<a class=" " href="?action=*mad">D-M�dchen</a>
</li>
<li class="menulevel2">
<a class=" " href="?action=*mae">E-M�dchen</a>
</li>
</ul>
</li>
<li class="menulevel1">
<a class=" " href="?action=*Hockey-Plan">Trainingsplan</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=*Hockey-Schiedsrichter"
>Schiedsrichter</a
>
</li>
<li class="menulevel1">
<a class=" " href="?action=*Hockey-Links">Offizielle Links</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=*Hockey-Kalender">Kalender</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
CSS类：
.mobilemenuitems,
.menulist {
list-style-type: none;
}
.expandsubmenu {
position: absolute;
right: 6px;
}
它会按照你期望的方式工作——你只需要添加更多的风格，让它在视觉上有吸引力。注意-当您使用position: any-valid-value时，浏览器会将元素从其自然上下文中删除，因此如果您不考虑这一点，可能会出现元素重叠。
PS-使用li元素嵌套ul是有效的HTML。