Bootstrap 导航下拉位置在鼠标移动时消失，并使 2 个单独的菜单出现在切换下的一个地方

我正在使用 Bootstrap 5。我试图将我的下拉菜单放置在完整水平菜单本身下方的位置。我通过给它一个“top: 5rem;”来做到这一点。风格。当我将鼠标悬停在父项时会出现下拉列表。但是当我尝试向下滚动以选择下拉菜单项时，下拉菜单消失了。如果我取消位置样式，并且下拉列表位于父项的正下方，则一切正常。我错过了什么？
我的导航中有 3 个不同的菜单区域。我已经能够在我的导航栏切换器中定位每一个（使用 data-bs-target），但它们都在它们的原始位置打开，而不是在切换区域内。如何将它们全部组合到一个区域，直接位于汉堡包下方？我是否需要使用 @media 查询规范创建 2 个单独的菜单区域？我真的宁愿避免这种情况，因为我认为 Bootstrap 切换器应该能够管理这个。