Javascript 多级下拉引导4，子菜单与父下拉列表顶部对齐

最近正在使用Bootstrap 4.4进行一个项目

它是一家电子商务杂货店，部门有分类和子分类，因此使用默认代码，主分类非常高

现在，在我的情况下，它看起来不太好，所以我希望所有子菜单都与父菜单的顶部对齐

我想你知道我想要什么

此外，在手机上，它的隐藏在底部

$（函数（）{
$（“ul.dropdown-menu[data toggle='dropdown']”）。在（“单击”上，函数（事件）{
event.preventDefault（）；
event.stopPropagation（）；
//方法2：从所有父母的所有兄弟姐妹中删除show
$（this）.parents（'.dropdown子菜单'）.sides（）.find（'.show'）.removeClass（“show”）；
$（this.sides（）.toggleClass（“show”）；
//在导航关闭后全部折叠
$（this）.parents（'li.nav item.dropdown.show'）.on（'hidden.bs.dropdown'，function（e）{
$（'.dropdown子菜单.show'）.removeClass（“show”）；
});
});
});
。下拉子菜单{
位置：相对位置；
}
.下拉子菜单>.下拉菜单{
排名：0；
左：100%；
}
.下拉子菜单>a:之后{
字体系列：“字体真棒5免费”！重要；
字号：900；
内容：“\f054”！重要；
边界：无；
位置：绝对位置；
右：10px；
顶部：5px；
}
.下拉菜单>li{
边框底部：1px实心rgba（0,0,0,0.05）；
}
.下拉菜单>li:最后一个孩子{
边框底部：无；
}
。下拉列表项。活动，
.下拉列表项：活动{
背景色：#F7000！重要；
颜色：#fff！重要；
}
.下拉项.下拉切换：悬停{
颜色：#F7000；
}
.下拉项：悬停{
颜色：#F7000；
}