Javascript 引导4下拉菜单在导航栏下方按下弹出窗口

我使用的是Bootstrap4，并实现了一个带有下拉菜单的导航栏。但是，我希望下拉菜单位于导航栏下方，而不是下拉链接下方的某个位置。因此，我将属性

top

从

100%

更改为自定义值，以便将下拉菜单进一步向下推（将其与导航栏的末端对齐-因此，就在导航栏下方）。也许你们有更好的解决方案来做这件事，而不是输入自定义值

由于这一变化，每次我想用courser从菜单链接滑动到下拉菜单时，我的菜单都会消失，因为我的菜单只在悬停时显示，而不是在单击时显示！它正在消失，因为鼠标不再在下拉菜单中，正如您在这两幅图像中看到的那样。有没有关于如何解决这个问题的建议

到目前为止我的导航栏（要查看问题，您必须查看桌面版本！）：

.navbar品牌p{
宽度：自动；
最大宽度：170px；
高度：47px；
}
navbar先生{
填充：.25rem 1rem；
}
.导航项目{
填充：0px 10px；
}
.导航栏.导航项：第一个子项{
左侧填充：0px；
}
.导航项：最后一个子项{
右边填充：0px；
}
.汉堡菜单{
证明内容：正确；
}
.下拉菜单{
左：未设置！重要；
最小宽度：300px！重要；
top:3.1rem！重要；
}
.下拉菜单：悬停>.下拉菜单{
显示：块；
}
.dropdown>.dropdown切换：激活{
指针事件：无；
}

这是js的方式：

如果不想使用js，则必须将dd放在菜单链接的末尾：

.dropdown:hover > .dropdown-menu {
    display: block;
    margin-top: -10px;
}

如果这是确定的，添加一些自定义类到下拉列表中，然后覆盖该类

---

这是下拉菜单，菜单区域结束，下拉菜单出现在菜单悬停上

您必须从.navbar中删除填充，并从.dropdown菜单中删除margin top 但是，如果你想让悬停效果，只做桌面大小。 像这样使用媒体查询

/* ============ desktop view ============ */
@media all and (min-width: 992px) {
    .navbar .nav-item .dropdown-menu{ display: none; }
    .navbar .nav-item:hover .nav-link{ color: #fff;  }
    .navbar .nav-item:hover .dropdown-menu{ display: block; }
    .navbar .nav-item .dropdown-menu{ margin-top:0; }
}   
/* ============ desktop view .end// ============ */

---

下面是有关引导导航栏的详细教程：

是的，这很有效。但现在，下拉菜单位于导航栏结束的行上方。这不是我想要的。我想让下拉菜单从导航栏菜单结束的地方开始！