Html CSS下拉列表未正确显示，下拉列表不可见

我在我的手机用户应用程序中放了一个下拉列表。下拉按钮工作正常，可按预期点击下拉内容/链接。问题是下拉内容/链接对用户不可见

我到处寻找答案，并尝试在我所有的样式表中重新编写代码。我的调试显示导航仍然正常工作，没有错误

我已附上我的代码：

HTML:

...

CSS:

@仅媒体屏幕和（最大宽度：2000px）{.mobileShow{display:none；}}
@仅媒体屏幕和（最大宽度：650px）{.mobileShow{display:block；}
.dropbtn{
显示：块；
位置：相对位置；
宽度：100%；
背景色：#009999；
颜色：白色；
字体大小：16px；
边界：无；
光标：指针；
z指数：9999；
}
.dropbtn:悬停{
位置：相对位置；
显示：块；
背景色：#00b3b3；
过渡：0.3s；
}
.下拉：悬停.下拉内容{
明确：两者皆有；
右：0；
位置：相对位置；
显示：块；
列表样式：无；
保证金：0；
填充：0；
宽度：460px；
高度：200px；
}

以下是用户悬停按钮时显示的内容： 悬停前->

---

悬停后->

删除.下拉内容的不透明度。 让它看起来

.dropdown-content {
    background-color: #fff;
    margin: 0;
    display: none;
    min-width: 100px;
    max-height: 650px;
    overflow-y: auto;
    /* opacity: 0; */
    position: absolute;
    z-index: 999;
    will-change: width, height;
}

---

删除.下拉内容的不透明度。 让它看起来

.dropdown-content {
    background-color: #fff;
    margin: 0;
    display: none;
    min-width: 100px;
    max-height: 650px;
    overflow-y: auto;
    /* opacity: 0; */
    position: absolute;
    z-index: 999;
    will-change: width, height;
}

固定CSS：

<style type="text/css">
@media only screen and (max-width: 2000px){ .mobileShow { display: none;}}
@media only screen and (max-width: 650px){ .mobileShow { display: block;}}
.dropbtn {
    display: block;
    position: relative;
    width: 100%;
    background-color: #009999;
    color: white;
    font-size: 16px;
    border: none;
    cursor: pointer;
    z-index: 9999;
}
.dropbtn:hover {
    position: relative;
    display: block;
   background-color:#00b3b3;
   transition: 0.3s;
}
.dropdown:hover .dropdown-content {
    clear:both;
    right: 0;
    position: relative;
    display: block;
    list-style:none;
    margin:0;
    padding:0;
    width:460px;
    height: 200px;
  opacity: 1;
  visibility: visible;
}
</style>

@仅媒体屏幕和（最大宽度：2000px）{.mobileShow{display:none；}}
@仅媒体屏幕和（最大宽度：650px）{.mobileShow{display:block；}
.dropbtn{
显示：块；
位置：相对位置；
宽度：100%；
背景色：#009999；
颜色：白色；
字体大小：16px；
边界：无；
光标：指针；
z指数：9999；
}
.dropbtn:悬停{
位置：相对位置；
显示：块；
背景色：#00b3b3；
过渡：0.3s；
}
.下拉：悬停.下拉内容{
明确：两者皆有；
右：0；
位置：相对位置；
显示：块；
列表样式：无；
保证金：0；
填充：0；
宽度：460px；
高度：200px；
不透明度：1；
能见度：可见；
}

添加不透明度：1；&能见度：可见；工作。

固定CSS：

<style type="text/css">
@media only screen and (max-width: 2000px){ .mobileShow { display: none;}}
@media only screen and (max-width: 650px){ .mobileShow { display: block;}}
.dropbtn {
    display: block;
    position: relative;
    width: 100%;
    background-color: #009999;
    color: white;
    font-size: 16px;
    border: none;
    cursor: pointer;
    z-index: 9999;
}
.dropbtn:hover {
    position: relative;
    display: block;
   background-color:#00b3b3;
   transition: 0.3s;
}
.dropdown:hover .dropdown-content {
    clear:both;
    right: 0;
    position: relative;
    display: block;
    list-style:none;
    margin:0;
    padding:0;
    width:460px;
    height: 200px;
  opacity: 1;
  visibility: visible;
}
</style>

@仅媒体屏幕和（最大宽度：2000px）{.mobileShow{display:none；}}
@仅媒体屏幕和（最大宽度：650px）{.mobileShow{display:block；}
.dropbtn{
显示：块；
位置：相对位置；
宽度：100%；
背景色：#009999；
颜色：白色；
字体大小：16px；
边界：无；
光标：指针；
z指数：9999；
}
.dropbtn:悬停{
位置：相对位置；
显示：块；
背景色：#00b3b3；
过渡：0.3s；
}
.下拉：悬停.下拉内容{
明确：两者皆有；
右：0；
位置：相对位置；
显示：块；
列表样式：无；
保证金：0；
填充：0；
宽度：460px；
高度：200px；
不透明度：1；
能见度：可见；
}

---

添加不透明度：1；&能见度：可见；工作。

你能提供一把工作用的小提琴吗？你能提供一把工作用的小提琴吗？嗨，伙计，我刚想好。通过添加以下不透明度：1；能见度：可见；嗨，伙计，我自己刚想出来。通过添加以下不透明度：1；能见度：可见；