如何实现下拉菜单与主菜单同级不重叠并隐藏其底部白色光晕？

一、实现下拉菜单与主菜单同层级不重叠 #

你之前改z-index没用，大概率是因为下拉菜单是主菜单项的嵌套子元素，z-index在嵌套上下文里只相对于父元素生效，没法突破主菜单的层级。解决思路是让两者处于同一层级的DOM结构，或者调整定位方式：

• 方案1：改用静态/相对定位替代绝对定位
  把下拉菜单的position从absolute改成static或者relative，同时确保主菜单和下拉菜单的容器是同级结构，再通过margin调整位置：

  /* 主导航容器 */
  .nav-bar {
    display: flex;
    width: 100%;
  }
  
  /* 主菜单项 */
  .nav-main-item {
    flex: 1;
    text-align: center;
  }
  
  /* 下拉菜单 */
  .dropdown-menu {
    position: static;
    margin-top: 0; /* 调整间距避免重叠 */
    width: 100%;
    list-style: none;
    padding: 0;
  }
  

• 方案2：将下拉菜单移出主菜单项的嵌套
  如果必须用定位，把下拉菜单放到和主菜单同级的DOM节点下，给两者的共同父容器设置position: relative，再分别控制位置：

  .nav-container {
    position: relative;
  }
  
  .nav-main {
    position: relative;
    z-index: 1;
  }
  
  .dropdown-menu {
    position: absolute;
    top: 100%; /* 对齐主菜单底部 */
    left: 0;
    z-index: 1; /* 和主菜单同层级 */
    width: 100%;
  }
  

二、隐藏下拉菜单底部的白色光晕 #

白色光晕基本是box-shadow或滤镜效果导致的，直接针对性清除：

.dropdown-menu {
  /* 清除盒子阴影 */
  box-shadow: none;
  /* 如果是用了drop-shadow滤镜 */
  filter: none;
}

如果是边框或伪元素造成的，检查并清除：

.dropdown-menu {
  border-bottom: none;
}

/* 若有伪元素生成的光晕 */
.dropdown-menu:after {
  display: none;
}

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