html下拉菜单无法选择,下拉菜单无法正常工作。（html）

即时通讯使我的网站只使用html代码(没有引导程序)。我想制作一个带有规格列表的下拉列表。问题是，一旦完成打开我的列表的操作，该内容将在下面移动，因此它在列表上重叠。

理想的想法是进行以下操作：

所以在这里，当我打开列表时，下面的内容会自动在下面显示更多(但这是引导程序，所以我不能只复制它，因为我仅使用html)

我的html代码是这样的：

Dropdown

Home

About

Contact

和CSS：

.dropbtn {

background-color: #3498DB;

color: white;

padding: 16px;

font-size: 16px;

border: none;

cursor: pointer;

}

.dropbtn:hover, .dropbtn:focus {

background-color: #2980B9;

}

.dropdown {

position: relative;

display: inline-block;

}

.dropdown-content {

display: none;

position: absolute;

background-color: #f1f1f1;

min-width: 160px;

overflow: auto;

box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

z-index: 1;

}

.dropdown-content a {

color: black;

padding: 12px 16px;

text-decoration: none;

display: block;

}

.dropdown a:hover {background-color: #ddd;}

.show {display: block;}