Javascript 下拉菜单无法正常工作。（html）

我只是用html代码制作我的网站（没有引导）。我想制作一个带有规格列表的下拉列表。问题是，当我打开列表时，它一旦完成，下面的内容就不会在下面移动，因此它会在列表上重叠。。看这张照片，看看我有什么

理想的想法是：

因此，在这里，当我打开下面的列表时，下面的内容会更自动地显示出来（但这是引导，所以我不能仅仅复制它，因为我只使用html）

我的html代码如下：

<div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">Dropdown</button>
  <div id="myDropdown" class="dropdown-content">
    <a href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
  </div>
</div>   

和javascript：

<script>

function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}
</script>

函数myFunction（）{
document.getElementById（“myDropdown”）.classList.toggle（“show”）；
}
//如果用户在下拉列表之外单击，请关闭下拉列表
window.onclick=函数（事件）{
如果（！event.target.matches（'.dropbtn'））{
var dropdowns=document.getElementsByClassName（“下拉内容”）；
var i；
对于（i=0；i

示例：

移除

位置：绝对位置来自
。下拉列表内容

更改为

中的
位置：相对
。下拉内容

---

尝试删除

位置：绝对来自
。下拉列表内容
类。
<script>

function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}
</script>