响应式导航栏小屏幕布局异常问题：Dropdown按钮与About链接未垂直排列

我仔细看了你的代码，问题出在小屏幕响应式模式下的Dropdown容器样式设置上。当前你给.topnav.responsive .dropdown加了float: left;，这会让Dropdown容器只占据自身内容的宽度，后面的About链接作为块级元素会填充剩余空间，导致两者挤在同一行。

只需要修改媒体查询里的这部分样式，把浮动改成块级显示并占满整行，就能让About链接自动移到Dropdown按钮下方：

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  /* 修改以下这段样式 */
  .topnav.responsive .dropdown {
    display: block;
    width: 100%;
  }
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}

修改后，Dropdown容器会占满导航栏的整个宽度，后面的About链接作为块级元素就会自动换行到下一行，和其他导航链接保持一致的垂直排列。你可以直接替换原来媒体查询里的对应代码，然后缩小浏览器窗口到600px以下测试，点击汉堡菜单后就能看到效果了。

内容的提问来源于stack exchange，提问作者guillanBesada