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

问题原因 #

你修改导航定位后下拉菜单消失，本质是hover触发范围不匹配，原代码的下拉菜单依赖父级<li>的hover状态显示，当你把外层nav从fixed改成relative后，要么是下拉菜单的定位基准偏移、要么是父级元素的溢出隐藏配置把下拉菜单裁掉，导致鼠标移动到下拉选项的路径上脱离了父级<li>的hover范围，菜单就自动收起了。

解决方案 #

1. 确保下拉菜单的定位基准正确 #

给所有包含下拉菜单的父级<li>加上position: relative;，保证子级下拉菜单（默认position: absolute）是相对于当前父菜单项定位，不会飘到li区域外：

nav .links > li {
  position: relative;
}

2. 移除导航外层的溢出隐藏配置 #

检查你的.wrapper、nav、.content这类外层容器，删除overflow: hidden配置，否则超出导航高度的下拉菜单会被直接裁剪，看不到也点不到。

3. 调整下拉菜单的位置避免空隙 #

把下拉菜单的top值设为父级li的100%高度，不要加额外的外边距留空隙，保证鼠标从父菜单项移到下拉选项的路径全程都在父li的hover范围内：

nav .links li > ul {
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
}
/* 父级hover时显示下拉 */
nav .links li:hover > ul {
  display: block;
}

4. 确认导航层级足够 #

给nav加上合适的z-index，避免下拉菜单被页面其他元素遮挡导致无法点击：

nav {
  position: relative;
  z-index: 99;
}

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