Javascript 如何使用水平滚动设置在容器内具有绝对位置的父元素的li元素定位

尝试实现一个定制的导航菜单，在这个菜单中，对于一个移动响应设计，我决定使用nav菜单容器上的水平滚动功能来显示主要项目（水平）。这些项目具有垂直显示的子项目（如列表中）

添加水平滚动后，从其原始位置向右滚动会导致子项（悬停在其父项上时显示）进一步向右移动，从而使其与其父项不对齐

我尝试添加js代码，根据滚动百分比计算距离，并调整子项以更好地与其父项对齐，但我得到的结果不同

:

/$（'.menu container'）。滚动（函数（）{
//var scrollPercentage=100*this.scrollLeft/this.scrollWidth/（1-this.clientWidth/this.scrollWidth）；
//log（scrollPercentage.toFixed（2））；
//$（“.menu>ul>.page\u item\u有\u children>.children”）.css（“左边距”，100/（-1.55*scrollPercentage.toFixed（2））；
// });
@导入url（'https://fonts.googleapis.com/css?family=Crimson+文本“自由+富兰克林”）；
身体{
字体系列：“深红色文本”，衬线；
/*字体系列：“自由富兰克林”，无衬线*/
}
/*****开始：表格*****/
.searchform{
显示：内联flex；
保证金：0自动；
}
/*****完:表格*****/
/*****开始：导航*****/
/***开始：菜单***/
.菜单容器{
显示器：flex；
空白：nowrap；
溢出-x：滚动；
对齐项目：居中；
}
.菜单容器：：-webkit滚动条轨迹{
-webkit盒阴影：插入0 0 6px rgba（0,0,0,0.3）；
边界半径：0.5雷姆；
背景色：#F5；
}
.菜单容器：：-webkit滚动条{
宽度：0.25雷姆；
高度：0.25雷姆；
背景色：#F5；
}
.菜单容器：：-webkit滚动条拇指{
边界半径：0.5雷姆；
-webkit盒阴影：插入0 0 6px rgba（0,0,0,3）；
背景色：#555；
}
.菜单{
显示：内联flex；
保证金：0自动；
}
.menu>ul{
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
}
.menu>ul>li{
显示：内联flex；
填充：0.5雷姆；
高度：2.75雷姆；
/*最大宽度：15雷姆*/
/*宽度：8雷姆*/
/*根据导航菜单主链接项的最长长度调整此值*/
}
.菜单a{
文字装饰：无；
显示器：flex；
对齐项目：居中；
}
.menu>ul>.page\u项\u有\u子项>.children{
填充：2rem0；
}
.李莉{
左边距：-0.5雷姆；
}
李先生{
/*背景：#000*/
}
.儿童{
保证金：1rem 0；
填充：0rem；
位置：绝对位置；
}
.儿童a{
宽度：100%；
填充：0.5雷姆；
}
.children.page\u项有\u个children.children{
显示：内联块；
保证金：0雷姆；
左：15rem；
/*根据导航菜单子项的最长长度调整此值*/
}
.儿童>李{
可见性：隐藏；
不透明度：0；
显示：无；
身高：4rem；
/*根据导航菜单子项的高度调整此值*/
}
.children.page\u项目有\u children.children>li{
/*左：1rem*/
/*位置：相对位置*/
}
li:hover>.children>li{
显示器：flex；
能见度：可见；
不透明度：1；
最大宽度：25雷姆；
宽度：15雷姆；
}
/***结束：菜单***/
/*****完:导航*****/
/*****开始：媒体*****/
@媒体屏幕和屏幕（最大宽度：1200px）{
/***开始：搜索表单*****/
/***完:Searchform***/
/***开始：菜单***/
/***结束：菜单***/
}
/*****结束：媒体******/
















































在我的项目中添加了这段jquery代码，它根据位移计算滚动值：

$('.menu-container').scroll(function() {
      var menuContainerScrollVal = $(".menu-container").scrollLeft();
     $(".menu > ul > .page_item_has_children >.children").css("margin-left", -menuContainerScrollVal); 
    });

这解决了我的问题，并为我提供了预期的解决方案。
与其共享链接，不如在此处粘贴代码，因为这将有助于其他人共享有关stackoverflow的问题。请阅读这篇文章，特别是：
帮助他人重现问题
，了解更多关于为什么不应该只发布链接到您的实例的信息。祝你好运@阿卡什杜比这篇文章显示了代码片段，尽管其中包含了链接。这可能是SO的默认行为。@StephanT。感谢您编辑我的答案，我不知道您在中包含了代码片段。