移动端导航切换菜单异常求助：小屏菜单默认显示需修复

问题根源 #

你的代码里，#menu这个ID选择器设置了display: flex，而ID选择器优先级高于类选择器，导致媒体查询里的.menu {display: none;}被覆盖，移动端菜单因此一直默认显示。

需要修改的地方 #

1. 消除优先级冲突：把全局#menu里的display: flex、justify-content: center等公共样式合并到.menu类中，移除#menu里的重复样式，只保留它特有的hover效果。
2. 确保移动端样式生效：媒体查询里的.menu {display: none;}现在能正常覆盖默认的.menu {display: flex;}，不会被更高优先级的ID选择器干扰。

修改后的完整代码 #

HTML

<div class="menu-toggle" onclick="toggleMenu()">
  <span>&#9776; Menu</span>
</div>

<nav>
  <!--questo è il menù-->
  <ul id="menu" class="menu">
    <li><a href="#">HOME</a></li>
    <li><a href="#">ABOUT</a></li>
    <li><a href="#">CONTACTS</a></li>
  </ul>
</nav>

CSS

nav {
  background-color: #333;
  color: whitesmoke;
}

/* 合并公共样式，用类选择器统一控制菜单显示 */
.menu {
  display: flex;
  justify-content: center;
  list-style-type: none;
  padding: 0;
  margin: 0;
  background-color: black;
  position: relative;
}

.menu li a:hover {
  color: black;
  background-color: white;
}

.menu li {
  margin-right: 20px;
  padding: 12px;
}

.menu li a {
  color: white;
  text-decoration: none;
  padding: 10px 15px;
  display: block;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  font-weight: bold;
  font-size: medium;
}

#menu li>a:hover {
  background-color: white;
  color: black;
  border-radius: 20px;
}

.menu-toggle {
  display: none;
}

@media only screen and (max-width: 768px) {
  .menu-toggle {
    display: block;
    text-align: right;
    padding: 10px;
    cursor: pointer;
    color: white;
    position: relative;
    background-color: black;
  }
  
  .menu {
    display: none;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }
  
  .menu li {
    margin: 10px 0;
    margin-right: 0; /* 适配纵向布局，移除横向间距 */
  }
  
  .menu.active {
    display: flex;
  }
}

JavaScript

function toggleMenu() {
  var menu = document.getElementById("menu");
  menu.classList.toggle("active")
}

额外优化 #

• 移除了媒体查询里重复的.menu-toggle样式，减少冗余代码
• 移动端菜单的li移除横向间距，让纵向布局更整齐
• 把border-radius: 20px 20px 20px 20px简化为border-radius: 20px，效果一致

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