移动端导航隐藏异常：列表与按钮未生效隐藏的问题求解

问题根因 #

你所有的菜单样式都被包裹在@media (max-width: 1200px)媒体查询中，仅在视口宽度≤1200px时生效。没有为宽度超过1200px的桌面端场景设置隐藏整个菜单的规则，因此大屏下菜单的按钮、列表元素会按默认规则显示，不会隐藏。

修复方案 #

在你的<style>标签内新增一段针对大屏的样式规则即可，代码如下：

/* 放在原有样式的外面即可，不要包在已有的max-width:1200px媒体查询里 */
@media (min-width: 1200px) {
  .menu {
    display: none !important;
  }
}

另外补充一个小的语法问题需要修复：你的HTML代码中Cart对应的<li>标签没有写闭合标签</li>，建议补上避免部分浏览器渲染异常。

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