Bootstrap 5移动端多级下拉菜单异常问题求助

各位大佬好，我用Bootstrap 5做了个带多级下拉的导航菜单，桌面端运行都正常，但在移动端遇到个棘手的问题：点击展开子下拉菜单的时候，父级下拉菜单直接关掉了，导致子菜单根本看不见。

我琢磨着这事儿用CSS的:has()伪类应该能解决，但目前还没完全摸透它的用法。我的需求很明确：当某个父级下拉菜单包含的子下拉菜单带有.show类时，这个父级菜单也得保持show对应的CSS状态。

我已经试过两种写法了：

第一种：

.navbar-nav .position-relative>.dropdown-menu:has(.show) {
  display: block;
  opacity: 1;
  visibility: visible;
  transition: .5s;
}

第二种：

.navbar-nav .position-relative>.dropdown-menu:has(.position-relative>.dropdown-menu.show) {
  display: block;
  opacity: 1;
  visibility: visible;
  transition: .5s;
}

备注：内容来源于stack exchange，提问作者marty90