导航栏定位从fixed改为relative后宽屏下下拉菜单失效如何解决

根因定位 #

导航从固定定位改为相对定位后，原代码的下拉菜单层级配置不合理是失效的核心原因：
原CSS中下拉菜单的z-index设置为-1，导航为固定定位时默认层级更高，下拉菜单可以正常显示；改为相对定位后，下拉菜单层级低于导航和页面其他元素，鼠标移动到下拉选项区域时，会判定为离开了导航的hover触发范围，菜单直接消失。

修复步骤 #

找到CSS代码中下拉菜单的基础配置段：

/* Dropdown Menu code start */
.content .links ul {
  position: absolute;
  background: #171c24;
  z-index: -1;
  opacity: 0;
  visibility: hidden;
}

将其中的z-index: -1修改为大于0的正数值即可，示例：

.content .links ul {
  position: absolute;
  background: #171c24;
  z-index: 999; /* 数值只要大于0即可，确保下拉菜单层级高于普通页面元素 */
  opacity: 0;
  visibility: hidden;
}

修改后即可在保留导航相对定位的前提下，正常触发下拉菜单的hover显示效果。

可选优化（修改z-index后仍偶现消失时使用） #

给一级菜单项添加相对定位，确保下拉菜单精确对齐父级菜单，避免鼠标移动路径上出现间隙导致hover失效：

.content .links > li {
  position: relative;
}

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