Javascript 导航栏，响应导航有问题

当我的导航栏显示在一个小屏幕移动示例上时，它没有按预期显示，我无法解决此问题

我尝试过几次更改css，但都变得更糟了

你能帮我吗

@介质最大宽度：1200px{ 标题{ /*利润率：20px*/ } } @介质最大宽度：768px{ .菜单切换{ 显示：块； 宽度：40px； 高度：40px； 利润率：10px； 浮动：对； 光标：指针； 文本对齐：居中； 字体大小：30px； 颜色：069370； } .菜单切换：之前{ 内容：'\f0c9'； 字体系列：Fontsome； 线高：40px； } .菜单切换。活动：之前{ 内容：'\f00d'； 字体系列：Fontsome； 线高：40px； } 导航{ 显示：无； } 主动导航{ 显示：块； 宽度：100%； } 主动导航{ 显示：块； } 主动ul-li-a导航{ 保证金：0； }

---

} 您只需要为容器设置更大的宽度

要解决您的问题，请执行以下操作：

---

您好，请遵循以下Html结构：

<header>
    <a href="#" class="logo">Logo</a>
    <div class="menu-toggle"></div>
      <nav>
        <ul>
          <li><a href="#" class="active">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">Team</a></li>
          <li><a href="#">Portfolio</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </nav>
      <div class="clearfix"></div>   

  </header>

元素a中的元素是浮动的，因此菜单不知道元素停在哪里，这导致CSS不知道如何计算该元素的高度

解决这个问题的一个快速方法是将溢出：隐藏：

---

你可以从这个精心设计的StackOverflow答案中学到很多，我在标题上添加了overflow:auto，它可以工作，但我也无法修复菜单面板，当我点击按钮菜单切换时，文本向右移动，我看不到他。 我想我的浮动有问题：在课堂上。菜单切换； 文本没有显示在手机屏幕上，他走到右边，但他没有占据好位置。。。 我想把菜单面板一个放在另一个下面

家 关于 服务 @介质最大宽度：1200px{ 标题{ /*利润率：20px*/ 溢出：自动； } } @介质最大宽度：768px{ .菜单切换{ 显示：块； 宽度：40px； 高度：40px； 利润率：10px； 浮动：对； 光标：指针； 文本对齐：居中； 字体大小：30px； 颜色：069370； } .菜单切换：之前{ 内容：'\f0c9'； 字体系列：Fontsome； 线高：40px； } .菜单切换。活动：之前{ 内容：'\f00d'； 字体系列：Fontsome； 线高：40px； } 导航{ 显示：无； } 主动导航{ 显示：块； 宽度：100%； } 主动导航{ 显示：块； } 主动ul-li-a导航{ 保证金：0； }

---

}您希望在设计中具体修改什么？

<header>
    <a href="#" class="logo">Logo</a>
    <div class="menu-toggle"></div>
      <nav>
        <ul>
          <li><a href="#" class="active">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">Team</a></li>
          <li><a href="#">Portfolio</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </nav>
      <div class="clearfix"></div>   

  </header>

<header style="overflow: auto"> ... </header>