响应式导航菜单异常：桌面端不显示仅移动端显示问题排查

我正在制作一个适配多屏幕的基础响应式网站，原本为桌面端设计的#mainnav导航仅在移动端显示，1026px及以上的桌面端完全看不到。尝试在小屏幕下给#mainnav设置display:none，但问题依旧，求原因及解决办法。

我的代码 #

CSS代码 #

/* -------------------- Mobile Screen ---------------------- */
/* ---------------------- Styles ---------------------- \*/
#mainnav {
display: none !important;
}

        #mobilenav {
            background: #333;
            margin-bottom: 0px;
            width: 100%;
        }
    
        .mobileonly {
        }
    
    
    /* -------------------- Tablet Screen ---------------------- */
        @media all and (min-width:651px) { 
    /* ---------------------- Styles ----------------------- */
        #mainnav {
            display: inherit;
        }
    }

/\* -------------------- Desktop Screen --------------------- */
@media all and (min-width:1026px) {  
/* ---------------------- Styles ----------------------- \*/

        .mobileonly {
            display: none;
        }
    
        #mobilenav {
            display: none;
        }
    
        #mainnav {
            background: #333;
            display: block;
        }
     }

/\* Image styles to make image responsive \*/

img {
max-width:100%;
height:auto;
}

html {
background: #B8B6DD;
min-height: 100vh!important;
}

body {
line-height: 1.45em;
padding-top: 60px;
}

a {
color: #0000EE;
}

a:hover, a:focus {
color: #000000;
}

button {
background-color: #333;
color: #fafafa;
border: none;
}

p {
margin-bottom: 0.75em;
}

h1,h2,h3,h4,h5 {
margin-bottom: 0.75em;
}

h1 {
font-size: 2em;
margin-top: 50px;
}

h2 {
font-size: 1.7em;
}

nav {
font-size: 1.25em;
}

header {
background: rgb(238,174,202);
background: radial-gradient(circle, rgba(238,174,202,1) 0%, rgba(148,187,233,1) 100%);
}

main {
margin-top: -20px;
height: 100vh;
}

main, footer {
background: #B8B6DD;
}

table, td, th {
border: 1px solid;
}

table {
width: 50%;
border-collapse: collapse;
}

ul.oi {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
border: none;
}

li.moo {
float: left;
}

ul.mobilelol {
list-style-type: none;
background: #333;
}

li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li a:hover:not(.active) {
background: rgb(238,174,202);
background: radial-gradient(circle, rgba(238,174,202,1) 0%, rgba(148,187,233,1) 100%);
}

.active {
background-color: #9BBAE7;
}

HTML代码 #

<!-- Do not modify the next three lines. -->

      <!--  Banner content goes here. -->
      
         <br>
         <ul>
            <li>
               <img src="images/a11yman.png" alt="Universal design icon" width="50">         
            </li>
            <li>
               <a href="index.html">Home</a>
            </li>
            <li>
               <a href="about.html">About</a>
            </li>
            <li>
               <a href="contact.html">Contact</a>
            </li>
         </ul>
      
       
         <br>
         <br>
         <h1>Ingrid: IT Accessibility Specialist</h1>

   <a href="#mobilenav">
   <img src="images/hamburger.png" alt="mobile navigation menu" title="Toggle Mobile Navigation Menu">
   </a>

      <!--  Main content goes here. -->
      <br>
      <h2>Service Offerings</h2>
      <ul>
         <li>Digital accessibility audits:
         <ul>
            <li>Web</li>
            <li>Apps (iOS and Android)</li>
            <li>Physical devices (e.g., kiosks)</li>
         </ul></li>
         <li>Accessibility program management consulting</li>
         <li>Policy development</li>
      </ul> 
    
      <h2>Rates</h2>  
      <p><strong>Please note, these rates are approximate and subject to change. Please contact me directly for quotes.</strong></p>
    
      <table>
         <caption>Service Rates</caption>
         <thead>
            <tr>
               <th scope="col">Service</th>
               <th scope="col">Rate</th>
            </tr>
         </thead>
         <tbody>
            <tr>
               <th scope="row">Digital accessibility audits (web, apps, kiosks)</th>
               <td>$120 per hour</td>
            </tr>
            <tr>
               <th scope="row">Accessibility program management consulting</th>
               <td>Varies</td>
            </tr>
            <tr>
               <th scope="row">Policy development</th>
               <td>$100 per hour</td>
            </tr>
         </tbody>
      </table>
    
    
    
      <!--  Footer content goes here -->
      <p>
         Copyright © 2024
      </p>
    
      <nav id="mobilenav">
         <br>
         <ul class="oi">
            <li>
               <a href="index.html">Home</a>
            </li>
            <li>
               <a href="about.html">About</a>
            </li>
            <li>
               <a href="contact.html">Contact</a>
            </li>
         </ul>
      </nav>
    
      <!-- <nav id="mobilenav">
         <br>
         <ul class="oi">
            <li class="moo">
               <img style="float: none;" id="logo" class="logo" src="images/a11yman.png" alt="A11y by Ingrid logo" width="50">         
            </li>
            <li class="moo">
               <a href="index.html">Home</a>
            </li>
            <li class="moo">
               <a href="about.html">About</a>
            </li>
            <li class="moo">
               <a href="contact.html">Contact</a>
            </li>
         </ul>
      </nav> -->
    
      <!--<nav id="mobilenav">
         <br>
         <ul class="oi">
            <li>
               <a href="index.html">Home</a>
            </li>
            <li>
               <a href="about.html">About</a>
            </li>
            <li>
               <a href="contact.html">Contact</a>
            </li>
         </ul>
      </nav> -->
    
    
    
      <ul>
         <li><a href="index.html">Home</a></li>
         <li><a href="about.html">About</a></li>
         <li><a href="contact.html">Contact</a></li>
      </ul>

问题原因与修复方案 #

核心问题1：HTML中缺少#mainnav元素 #

CSS里反复设置#mainnav的显示状态，但你的HTML代码里根本没有带id="mainnav"的导航元素。当前桌面端想显示的导航只是一个普通<ul>，没有绑定对应ID，导致CSS规则完全无法作用到它身上。

核心问题2：CSS注释语法错误 #

你使用了/\* ... */的错误注释格式，正确的CSS注释应为/* ... */。错误注释会打断CSS解析，导致后续规则失效（比如桌面端媒体查询的注释错误，可能影响导航样式生效）。

修复步骤 #

1. 给桌面导航添加#mainnavID
   找到HTML末尾的桌面导航<ul>，修改为：

   <nav id="mainnav">
     <ul>
       <li><a href="index.html">Home</a></li>
       <li><a href="about.html">About</a></li>
       <li><a href="contact.html">Contact</a></li>
     </ul>
   </nav>
   

   用<nav>包裹并添加id="mainnav"，让CSS规则能正确匹配。

2. 修正CSS注释语法
   将所有错误的/\*替换为/*，比如：

   • 移动端注释/* ---------------------- Styles ---------------------- \*/改为/* ---------------------- Styles ---------------------- */
   • 桌面端媒体查询开头的/\* -------------------- Desktop Screen --------------------- */改为/* -------------------- Desktop Screen --------------------- */

3. 优化初始样式逻辑
   去掉#mainnav上的!important（它会让桌面端样式难以覆盖），重新梳理显示逻辑：

   • 默认（移动端）：#mainnav { display: none; }，#mobilenav { display: block; }
   • 平板端（651px+）：#mainnav { display: block; }（可根据需求选择是否隐藏#mobilenav）
   • 桌面端（1026px+）：#mainnav { display: block; }，#mobilenav { display: none; }

调整后的核心CSS示例 #

/* -------------------- Mobile Screen ---------------------- */
#mainnav {
  display: none;
}

#mobilenav {
  background: #333;
  margin-bottom: 0px;
  width: 100%;
}

/* -------------------- Tablet Screen ---------------------- */
@media all and (min-width:651px) { 
  #mainnav {
    display: block;
  }
  /* 可选：平板端隐藏移动端导航 */
  /* #mobilenav { display: none; } */
}

/* -------------------- Desktop Screen --------------------- */
@media all and (min-width:1026px) {  
  .mobileonly {
    display: none;
  }
  
  #mobilenav {
    display: none;
  }
  
  #mainnav {
    background: #333;
    display: block;
  }
}

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