html - 自适应NavBar仅使用CSS和html

我的媒体查询下拉菜单无法正常工作，是否有我错过的事情？

Dropdown Image mess

在JSfiddle中，它不允许我使用下拉菜单。
并且在我的Visual Studio中运行后，它会出现Dropdown图像混乱的情况。

@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;

出问题了...
请帮忙。
   https://jsfiddle.net/0tugk2L5/8/

最佳答案

我通过从代码的这一部分中删除width: 100%来解决宽度问题：

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

那是唯一的问题吗？

UPD：
我已将.dropdown-content {top: 0;}添加到较小的屏幕尺寸的媒体查询中，并且效果很好
https://jsfiddle.net/aesk9y9v/1/

关于html - 自适应NavBar仅使用CSS和html，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50283890/