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

Question

我的媒体查询下拉菜单无法正常工作是不是我遗漏了什么？

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/

Answer 1

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

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

这是唯一的问题吗？

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