Javascript 将淹没菜单放置在其父项下

所以我有一个小问题，但很烦人。我希望子菜单显示在每个子菜单的父菜单下

• 现在，当鼠标悬停在父菜单上时，每个子菜单都会显示在 第一个

  li

  项

尝试：我做了

。主导航ul

相对定位
e，而
。主导航ul
是绝对定位的-请查看代码。想法


（函数（$）{
/*点击导航*/
//主菜单下拉菜单（移动）
$（“.dropdown toggle”）。单击（函数（）{
$（this.parent（）.find（“.sub-menu:first”）.toggleClass（“toggle on”）；
});
/*悬停导航*/
//子菜单下拉列表
//$（“.main导航ul li.菜单项有子项”）.hover（函数（）{
//$（this.find（“.sub-menu:first”）.toggleClass（“toggleon”）；
// });
变量菜单超时；
$（“.main navigation ul li.菜单项有子项”）。悬停(
函数（）{//Mouseenter
var，该值=$（此值）；
找到（“.sub-menu:first”）.addClass（“切换开”）；
clearTimeout（菜单超时）；
},
函数（）{//Mouseleave
var，该值=$（此值）；
菜单\超时=设置超时（函数（）{
.find（“.sub-menu:first”）.removeClass（“toggle on”）；
}, 250);
}
);
/*子菜单单击mobil版本*/
$（“.menu toggle”）。单击（函数（）{
$（“.main-navigation-ul:first”）.toggleClass（“toggle-on”）；
});
//$（“.main navigation li.菜单项有子项”）.mouseleave（函数（）{
//$（“.sub-menu”）.removeClass（“打开切换”）；
// });
})（jQuery）
*，
html{
保证金：0；
字体大小：22px；
}
.网站标题{
宽度：100%；
/*最小高度：99px*/
背景色：#0b80c3；
z指数：100；
}
.收割台包装{
显示器：flex；
证明内容：之间的空间；
对齐项目：居中；
填充：0 20px；
宽度：100%；
最大宽度：1920像素；
保证金：自动；
}
@媒体屏幕和屏幕（最小宽度：1024px）{
.网站标题{
位置：固定；
}
.收割台包装{
排名：0；
左：0；
右：0；
宽度：100%；
保证金：0自动；
}
.网站品牌{
左边距：2.5雷姆；
}
}
@媒体屏幕和屏幕（最小宽度：1922px）{
.收割台包装{
左：0；
}
}
/*汉堡包导航样式*/
#边栏btn{
垂直对齐：中间对齐；
宽度：40px；
高度：25px；
光标：指针；
利润率：10px；
位置：相对位置；
顶部：4px；
}
#边栏btn跨度{
高度：2倍；
背景：黑色；
边缘底部：5px；
显示：块；
}
#边栏btn跨度：第n个子项（2）{
宽度：75%；
}
#边栏btn跨度：第n个子项（3）{
宽度：50%；
}
/*主菜单*/
.main导航{}
.fa插入符号向下{
颜色：#fff；
}
.菜单测试容器{
位置：绝对位置；
顶部：145px；
左：0；
z指数：100；
宽度：100%；
背景色：黑色；
}
.主导航.menu.toggle-on{
显示：块；
}
.主导航{
显示：无；
位置：相对位置；
}
.主导航ul li{
边框底部：1px纯银；
填充：20px；
}
@媒体屏幕和屏幕（最小宽度：768px）{
.主导航ul li{
填充：15px；
}
}
@媒体屏幕和屏幕（最小宽度：900px）{
.主导航ul li{
填充：20px；
}
}
.主导航ul li a{
颜色：#fff；
文字装饰：无；
}
@媒体屏幕和屏幕（最大宽度：467px）{
.主导航ul li:悬停{
背景色：无；
}
.主导航ulli{
边框底部：无；
}
}
@媒体屏幕和屏幕（最小宽度：468px）{
.主导航ul li:悬停{
背景色：#ffcc33；
}
}
/*子菜单样式*/
.sub-menu.toggle-on{
显示：块；
}
.主导航ul，
.主导航系统，
.主导航{
列表样式：无；
显示：无；
左边距：0；
左侧填充：0；
}
/*定位每个子菜单的x和y*/
.主导航{
位置：相对位置；
左：0；
顶部：10px；
最小宽度：200px；
背景色：黑色；
}
.主导航ul li:悬停，
.主导航ulli：焦点{
背景色：黑色；
}
@媒体屏幕和屏幕（最小宽度：468px）{
.主导航{
位置：相对位置；
左：0；
顶部：75px；
最小宽度：200px；
背景色：#0c7cbc；
}
.主导航ul li:悬停{
背景色：#ffcc33；
}
}
.主导航{
左：150px；
排名：0；
背景色：继承；
}
.主导航{
背景颜色：绿色；
顶部：20px；
左：0；
}
.主导航{
背景色：黑色；
顶部：0px；
左：200px；
}
.主导航{
背景颜色：银色；
顶部：0px；
左：200px；
}
@仅介质屏幕和（最小宽度：468px）{
.收割台包装{
弯曲方向：立柱；
/*填充：0 1rem*/
}
.网站名称{
边缘底部：1rem；
}
/*主导航-摆脱navburger*/
#边栏btn{
显示：无；
}
.菜单切换{
显示：无；
}
.主导航.menu.toggle-on{
显示器：flex；
/*背景颜色：蓝色；
*/
}
.主导航{
显示器：flex；
对齐项目：居中；
弯曲方向：行；
柔性包装：包装；
证明内容：之间的空间；
背景色：#0b80c3；
}
.菜单测试容器{
显示：块；
位置：相对位置；
排名：0；
}
/*结束*/
/*子菜单导航平板电脑*/
/*定位每个子菜单的x和y*/
.主导航{
位置：绝对位置；
}
.主导航ulli{
填充：7px 1px；
}
.主导航ul li a{
字体大小：90%；
填充：10px 10px；
}
.主导航{
左：6.4rem；
顶部：5px；
}
.主导航{
顶部：35px；
左：0；
}
.主导航{
顶部：0px；
左：141px；
}
.主导航{
顶部：0px；
左：200px；
}
}
/*平板电脑菜单*/
@仅介质屏幕和（最小宽度：768px）{
.收割台包装{
弯曲方向：行；
}
.网站名称{
页边距底部：0；
}
/*主导航-
ul li {
    position: relative;
}

<ul class="root">
    <li>
      Services
    </li>
  <li>
    Rural
    <ul class="child">
      <li>CHILD 1</li>
      <li>CHILD 2</li>
      <li>CHILD 3</li>
      <li>CHILD 4</li>
      <li>CHILD 5</li>
    </ul>
  </li>
  <li>
    Projects
  </li>
  <li>
    Blog
  </li>
  <li>
    About
  </li>
</ul>