水平滚动导航栏滚动后hover触发子下拉菜单位置偏移问题

问题原因 #

你的子菜单使用absolute绝对定位，但作为其直接父容器的.each菜单项未设置position: relative，导致子菜单的定位基准是全局根元素而非当前 hover 的菜单项。导航栏横向滚动时菜单项的位置随滚动偏移，但子菜单始终基于初始视口位置计算坐标，就会出现偏移问题。

解决方案 #

只需修改.each类的 CSS 规则，为其添加相对定位，同时给一级子菜单补充明确的定位属性即可：

/* 修改原有.each类，新增相对定位属性 */
.each {
    cursor: pointer;
    background:white;
    position: relative;
}
/* 新增一级子菜单定位规则，确保对齐父菜单项 */
.nav > .each > .sub-menu {
    top: 100%;
    left: 0;
}

原有其他代码不需要修改，修改后无论导航栏横向滚动到什么位置，子菜单都会跟随当前 hover 的菜单项展示在正确位置。

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