仅使用CSS和html的响应导航栏

我的“媒体查询”下拉列表无法正常工作是否有遗漏的内容

在JSFIDLE中，它不允许我使用下拉列表。 在我的VisualStudio中，运行后会出现下拉图像混乱

@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
 position: absolute;
 right: 0;
 top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
 display:block;
 width: 100%;
text-align: left;

有点不对劲。。。 请帮忙。

---

我已经解决了宽度问题，将

宽度：100%

从代码的这一部分中删除：

 .topnav.responsive .dropdown .dropbtn {
   display:block;
   width: 100%;
   text-align: left;
 }

这是唯一的问题吗

UPD： 我已经为小屏幕的媒体查询添加了

。下拉内容{top:0；}

，效果非常好

---

要使您的小提琴工作，请将JavaScript设置中的加载类型更改为“无换行”。（JS字段中的下拉菜单）当我将鼠标悬停在类别上时，有一个灰色空白也是问题之一..明白了！定位调用了问题。下拉内容。检查并回答谢谢你解决了我的问题！