尝试实现自定义导航菜单，对于移动响应式设计，我决定在导航菜单容器上使用水平滚动功能来显示主要项目（水平）。这些项目具有垂直显示的子项目（如列表中）。
添加水平滚动后，从其原始位置向右滚动会导致子项（当将鼠标悬停在其父项上时显示）向右移动，从而使其与父项不对齐。
我尝试添加js代码，该代码根据滚动百分比计算距离并调整子项以更好地与其父项对齐，但结果却有所不同。
// $('.menu-container').scroll(function(){
// var scrollPercentage = 100*this.scrollLeft/this.scrollWidth/(1-this.clientWidth/this.scrollWidth);
// console.log(scrollPercentage.toFixed(2));
// $(".menu > ul > .page_item_has_children > .children").css("margin-left", 100 / (-1.55 * scrollPercentage.toFixed(2)));
// });@import url('https://fonts.googleapis.com/css?family=Crimson+Text|Libre+Franklin');
body {
font-family: 'Crimson Text', serif;
/* font-family: 'Libre Franklin', sans-serif; */
}
/***** Start: Forms *****/
.searchform {
display: inline-flex;
margin: 0 auto;
}
/***** End: Forms *****/
/***** Start: Navigation *****/
/*** Start: Menus ***/
.menu-container {
display: flex;
white-space: nowrap;
overflow-x: scroll;
align-items: center;
}
.menu-container::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
border-radius: 0.5rem;
background-color: #F5F5F5;
}
.menu-container::-webkit-scrollbar {
width: 0.25rem;
height: 0.25rem;
background-color: #F5F5F5;
}
.menu-container::-webkit-scrollbar-thumb {
border-radius: 0.5rem;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
background-color: #555;
}
.menu {
display: inline-flex;
margin: 0 auto;
}
.menu>ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.menu>ul>li {
display: inline-flex;
padding: 0 0.5rem;
height: 2.75rem;
/* max-width: 15rem; */
/* width: 8rem; */
/* Adjust this value depending on the longest length of the navigation menu's main link items */
}
.menu a {
text-decoration: none;
display: flex;
align-items: center;
}
.menu>ul>.page_item_has_children>.children {
padding: 2rem 0 0 0;
}
.menu li li {
margin-left: -0.5rem;
}
.menu li {
/* background: #000; */
}
.children {
margin: 1rem 0;
padding: 0rem;
position: absolute;
}
.children a {
width: 100%;
padding: 0 0.5rem;
}
.children .page_item_has_children .children {
display: inline-block;
margin: 0rem;
left: 15rem;
/* Adjust this value depending on the longest length of the navigation menu's sub-items */
}
.children>li {
visibility: hidden;
opacity: 0;
display: none;
height: 4rem;
/* Adjust this value depending on the height of the navigation menu's sub-items */
}
.children .page_item_has_children .children>li {
/*left: 1rem;*/
/*position: relative;*/
}
li:hover>.children>li {
display: flex;
visibility: visible;
opacity: 1;
max-width: 25rem;
width: 15rem;
}
/*** End: Menus ***/
/***** End: Navigation *****/
/***** Start: Media *****/
@media screen and (max-width: 1200px) {
/*** Start: Searchform *****/
/*** End: Searchform ***/
/*** Start: Menus ***/
/*** End: Menus ***/
}
/***** End: Media *****/<div class="menu-container">
<div class="menu">
<ul>
<li class=""><a href="https://MidniteDev-Development.000webhostapp.com/">Home</a></li>
<li class=""><a href="https://MidniteDev-Development.000webhostapp.com/front-page">Front Page</a></li>
<li class=""><a href="https://MidniteDev-Development.000webhostapp.com/blog">Blog</a></li>
<li class="page_item_has_children">
<a href="https://MidniteDev-Development.000webhostapp.com/about">About The Tests</a>
<ul class="children">
<li class=""><a href="https://MidniteDev-Development.000webhostapp.com/about/page-image-alignment">Page Image Alignment</a></li>
<li class="page_item_has_children">
<a href="https://MidniteDev-Development.000webhostapp.com/about/page-markup-and-formatting">Page Markup And Formatting</a>
<ul class="children">
<li class=""><a href="https://MidniteDev-Development.000webhostapp.com/about/page-markup-and-formatting/formatting-content-with-images">Formatting Content with Images</a></li>
</ul>
</li>
<li class="page_item_has_children">
<a href="https://MidniteDev-Development.000webhostapp.com/about/clearing-floats">Clearing Floats</a>
<ul class="children">
<li class=""><a href="https://MidniteDev-Development.000webhostapp.com/about/clearing-floats/clearing-floats-part-1">Clearing Floats Part 1</a></li>
<li class=""><a href="https://MidniteDev-Development.000webhostapp.com/about/clearing-floats/clearing-floats-part-2">Clearing Floats Part 2</a></li>
</ul>
</li>
<li class="page_item_has_children">
<a href="https://MidniteDev-Development.000webhostapp.com/about/page-with-comments">Page with comments</a>
<ul class="children">
<li class=""><a href="https://MidniteDev-Development.000webhostapp.com/about/page-with-comments/this-page-is-served-with-at-least-10-comments">This Page Is Served With at Least 10 Comments using Disqus</a></li>
</ul>
</li>
<li class=""><a href="https://MidniteDev-Development.000webhostapp.com/about/page-with-comments-disabled">Page with comments disabled</a></li>
</ul>
</li>
<li class="page_item_has_children">
<a href="https://MidniteDev-Development.000webhostapp.com/level-1">Level 1</a>
<ul class="children">
<li class="page_item_has_children">
<a href="https://MidniteDev-Development.000webhostapp.com/level-1/level-2">Level 2</a>
<ul class="children">
<li class="page_item_has_children">
<a href="https://MidniteDev-Development.000webhostapp.com/level-1/level-2/level-3">Level 3</a>
<ul class="children">
<li class=""><a href="https://MidniteDev-Development.000webhostapp.com/level-1/level-2/level-3/level-4">Level 4</a></li>
</ul>
</li>
<li class=""><a href="https://MidniteDev-Development.000webhostapp.com/level-1/level-2/level-3a">Level 3a</a></li>
<li class=""><a href="https://MidniteDev-Development.000webhostapp.com/level-1/level-2/level-3b">Level 3b</a></li>
</ul>
</li>
<li class=""><a href="https://MidniteDev-Development.000webhostapp.com/level-1/level-2a">Level 2a</a></li>
<li class=""><a href="https://MidniteDev-Development.000webhostapp.com/level-1/level-2b">Level 2b</a></li>
</ul>
</li>
<li class=""><a href="https://MidniteDev-Development.000webhostapp.com/lorem-ipsum">Lorem Ipsum</a></li>
<li class=""><a href="https://MidniteDev-Development.000webhostapp.com/page-a">Page ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuv</a></li>
<li class=""><a href="https://MidniteDev-Development.000webhostapp.com/page-b">Page B</a></li>
</ul>
</div>
<form role="search" method="get" id="searchform" class="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>">
<div class="box">
<div class="container-1">
<input type="text" value="" name="s" id="s" placeholder="Search..." />
<button type="submit" id="searchsubmit" /><i class="fas fa-search"></i>
</button>
</div>
</div>
</form>
</div>
这是滚动过程中的预期结果，无论到达多远：
> Parent item > Parent item > Parent item
> child item
> child item
> child item
这就是我得到的：
> Parent item > Parent item > Parent item
> child item
> child item
> child item
为更好地理解我的意思，请在查看菜单时将浏览器的大小调整为1200px以下。
答案 0 :(得分：1)
在我的项目中添加了这段jQuery代码，该代码根据其位移计算滚动值：
available_chars.sample(nbr_replacements)这解决了我的问题，并为我提供了预期的解决方案。