窄屏时导航栏MENU下拉按钮不显示问题求助

问题概述 #

开发响应式导航栏时，页面宽度低于1045px时已成功隐藏导航选项，但MENU下拉按钮无法正常显示，需求是隐藏导航选项后显示包含所有选项的MENU按钮。

错误原因 #

CSS代码顺序导致媒体查询的显示设置被覆盖：

• 媒体查询中设置.dropbtn {display:block;}，但后续普通样式里.dropbtn定义了display:none;，由于同优先级选择器下，位置靠后的样式会覆盖前面的，导致按钮仍处于隐藏状态。
• 未对小屏幕下的导航布局做适配，即使按钮显示也可能位置异常。

修正后的代码 #

HTML代码（无需修改） #

<nav>
<a title="Go to 'Before Rutherford' page" href="#">BEFORE RUTHERFORD</a>
<a title="Go to 'Experiment + results' page" href="exp.html">EXPERIMENT + RESULTS</a>
<a title="Go to 'What it changed' page" href="chang.html">WHAT IT CHANGED</a>
<a title="Go to 'Scattering equation' page" href="equa.html">SCATTERING EQUATION</a>
<div class="dropdown">
    <button class="dropbtn">MENU</button>
    <div class="dropdown-content">
        <a title="Go to 'Before Rutherford' page" href="#">BEFORE RUTHERFORD</a>
        <a title="Go to 'Experiment + results' page" href="exp.html">EXPERIMENT + RESULTS</a>
        <a title="Go to 'What it changed' page" href="chang.html">WHAT IT CHANGED</a>
        <a title="Go to 'Scattering equation' page" href="equa.html">SCATTERING EQUATION</a>
    </div>
</div>
</nav>

修正后的CSS代码 #

nav {
    background-color: rgb(0, 25, 50);
    width: auto;
    text-align: center;
    padding-top: 14px;
    padding-bottom: 14px;
}

nav a {
    color: whitesmoke;
    text-decoration: none;
    font-size: 16px;
    padding-left: 30px;
    padding-right: 30px;
}

nav a:hover{
    color: rgb(255, 192, 0);
}

.dropdown {
   position: relative;
   display: inline-block;
}

.dropbtn {
    background-color: rgb(0, 25, 50);
    color: whitesmoke;
    font-size: 16px;
    border: none;
    cursor: pointer;
    display:none;
    padding: 14px 20px; /* 添加上下内边距，与导航栏视觉对齐 */
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    left: 50%; /* 下拉菜单相对按钮居中 */
    transform: translateX(-50%);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {
    background-color: #f1f1f1
}

.dropdown:hover .dropdown-content {
    display: block;
}

/* 将媒体查询移至普通样式之后，确保优先级生效 */
@media (max-width: 1045px) { 
    nav a{display: none;} 
    .dropbtn {display:block;}
}

关键修改说明 #

1. 调整代码顺序：把媒体查询移到所有普通CSS样式后面，保证媒体查询中的display:block能覆盖之前的display:none。
2. 优化按钮样式：给.dropbtn添加上下内边距，和导航栏的内边距匹配，视觉更协调。
3. 下拉菜单居中：给.dropdown-content添加left:50%和transform: translateX(-50%)，让下拉菜单相对于按钮居中，提升移动端使用体验。

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