技术问询：800px以下屏幕中Navbar为何被下拉导航菜单遮挡？

在使用媒体查询适配800像素以下屏幕布局时，下拉导航菜单会覆盖Navbar本身，导致菜单切换按钮被遮挡无法点击。

问题代码 #

JavaScript代码

var MenuItems = document.getElementByID("MenuItems"); // 存在拼写错误：正确写法为getElementById

MenuItems.style.maxHeight = "0px";

function menutoggle(){
  if(MenuItems.style.maxHeight == "0px") {
    MenuItems.style.maxHeight = "200px";
  }
  else {
    MenuItems.style.maxHeight = "0px";
  }
}

CSS代码

.MenuIcon {
  width: 28px;
  margin-left: 20px;
  display: none;                             
}


/*------------Media query for menu-------------*/

@media only screen and (max-width: 800px) {
  nav ul {
    position: absolute;
    top: 70px;
    left: 0;
    background: #333;
    width: 100%;
    overflow: hidden;
    transition: max-height 0.4444s;
  }

  nav ul li {
    display: block;
    margin-right: 50px;
    margin-top: 10px;
    margin-bottom: 10px;
  }

  nav ul li a {
    color: #fff;
  }

  .MenuIcon {
    display: block;
    cursor: pointer;
  }
}

HTML代码

<div class="Header">
  <div class="Container">
    <div class="Navbar">
        <div class="Logo">
            <img src="Images/JDSTUDIOSLOGO.png" width="125px">
        </div>
        <nav>
          <ul id="MenuItems">
            <li><a href="">Home</a></li>
            <li><a href="">Products</a></li>
            <li><a href="">About</a></li>
            <li><a href="">Content</a></li>
            <li><a href="">Account</a></li>
          </ul>
        </nav>
        <img src="Images/Cart16.png" width="30px" height="30px;">
        <img src="Images/MENU3.png" class="MenuIcon" onclick="menutoggle()">
    </div>
  </div>
</div>

问题原因与解决方法 #

1. 层级覆盖问题：绝对定位的nav ul没有设置层级限制，菜单按钮.MenuIcon层级不足，导致下拉菜单弹出后遮挡按钮。
2. JS拼写错误：getElementByID应为getElementById（ID的D小写），否则无法正确获取菜单元素，切换功能失效。

修正后的代码

修正后的CSS（添加层级控制）

.MenuIcon {
  width: 28px;
  margin-left: 20px;
  display: none;
  position: relative;
  z-index: 100; /* 让按钮层级高于下拉菜单 */
}

.Navbar {
  position: relative; /* 让绝对定位的下拉菜单以Navbar为参考容器 */
}

/*------------Media query for menu-------------*/

@media only screen and (max-width: 800px) {
  nav ul {
    position: absolute;
    top: 70px;
    left: 0;
    background: #333;
    width: 100%;
    overflow: hidden;
    transition: max-height 0.4444s;
    z-index: 90; /* 层级低于菜单按钮 */
  }

  nav ul li {
    display: block;
    margin-right: 50px;
    margin-top: 10px;
    margin-bottom: 10px;
  }

  nav ul li a {
    color: #fff;
  }

  .MenuIcon {
    display: block;
    cursor: pointer;
  }
}

修正后的JavaScript（修复拼写错误）

var MenuItems = document.getElementById("MenuItems");

MenuItems.style.maxHeight = "0px";

function menutoggle(){
  if(MenuItems.style.maxHeight == "0px") {
    MenuItems.style.maxHeight = "200px";
  }
  else {
    MenuItems.style.maxHeight = "0px";
  }
}

说明 #

• 给.Navbar设置相对定位，避免下拉菜单脱离预期布局范围。
• 通过z-index明确层级关系，确保菜单按钮始终处于下拉菜单上方，可正常点击。
• 修正JS拼写错误，保证菜单切换逻辑正常执行。

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