如何在Bootstrap 5下拉菜单中嵌入Tabs标签页组件

我正在使用Bootstrap 5的下拉菜单组件，需要在其内部嵌入Tabs标签页，已找到阻止点击事件冒泡的方案可避免点击菜单内部时下拉菜单自动关闭。
我希望将标签页放入下拉菜单内，预期实现效果如下：

请问我该如何在下拉菜单中嵌入Tabs标签页？
以下是我当前已写的代码：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
        <ul class="navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Features</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Pricing</a>
            </li>
            <li class="nav-item dropdown">
                <form>
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      Dropdown link
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                        <div class="container">
                            <ul id="tabs" class="nav nav-tabs" role="tablist">
                                <li class="nav-item">
                                    <a id="tab-A" href="#pane-A" class="nav-link active" data-bs-toggle="tab" role="tab">–A–</a>
                                </li>
                                <li class="nav-item">
                                    <a id="tab-B" href="#pane-B" class="nav-link" data-toggle="tab" role="tab">–B–</a>
                                </li>
                                <li class="nav-item">
                                    <a id="tab-C" href="#pane-C" class="nav-link" data-toggle="tab" role="tab">–C–</a>
                                </li>
                            </ul>


                            <div id="content" class="tab-content" role="tablist">
                                <div id="pane-A" class="card tab-pane fade show active" role="tabpanel" aria-labelledby="tab-A">
                                    <div class="card-header" role="tab" id="heading-A">
                                        <h5 class="mb-0">
                  <a data-toggle="collapse" href="#collapse-A" data-parent="#content" aria-expanded="true" aria-controls="collapse-A">
                    Collapsible Group Item A
                  </a>
                </h5>
                                    </div>
                                    <div id="collapse-A" class="collapse show" role="tabpanel" aria-labelledby="heading-A">
                                        <div class="card-body">
                                            [Tab content A]
                                        </div>
                                    </div>
                                </div>

                                <div id="pane-B" class="card tab-pane fade" role="tabpanel" aria-labelledby="tab-B">
                                    <div class="card-header" role="tab" id="heading-B">
                                        <h5 class="mb-0">
                  <a class="collapsed" data-toggle="collapse" href="#collapse-B" data-parent="#content" aria-expanded="false" aria-controls="collapse-B">
                    Collapsible Group Item B
                  </a>
                </h5>
                                    </div>
                                    <div id="collapse-B" class="collapse" role="tabpanel" aria-labelledby="heading-B">
                                        <div class="card-body">
                                            [Tab content B]
                                        </div>
                                    </div>
                                </div>

                                <div id="pane-C" class="card tab-pane fade" role="tabpanel" aria-labelledby="tab-C">
                                    <div class="card-header" role="tab" id="heading-C">
                                        <h5 class="mb-0">
                  <a class="collapsed" data-toggle="collapse" href="#collapse-C" data-parent="#content" aria-expanded="false" aria-controls="collapse-C">
                    Collapsible Group Item C
                  </a>
                </h5>
                                    </div>
                                    <div id="collapse-C" class="collapse" role="tabpanel" aria-labelledby="heading-C">
                                        <div class="card-body">
                                            [Tab content C]
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </li>
        </ul>
    </div>
</nav>

内容的提问来源于stack exchange，提问作者user16277300