Angular下拉菜单展开后覆盖按钮问题求助

我在Angular项目中实现了自定义Dropdown指令，当前遇到问题：点击展开dropdown菜单时，菜单会覆盖触发按钮，显示效果不佳。以下是我的代码：

HTML代码 #

<nav class="navbar bg-dark navbar-dark">
    <div class="container-fluid">
        <div class="navbar-header">
            <a href="#" class="navbar-brand">Recipe Book</a>
        </div>
        <div class="navbar">
            <ul class="nav navbar-nav nav">
                <li class="nav-item" (click)="onSelect('recipe')"><a href="#">Recipies</a></li>
                <li class="nav-item" (click)="onSelect('shoping-list')"><a href="#">Shopping List</a></li>
            </ul>
            <div 
                class="btn-group"
                appDropdown
                #r="appDropdown">
                <button 
                    class="btn btn-close-white dropdown-toggle"
                    type="button"
                    data-toggle="dropdown">
                    Menage<span class="caret"></span>
                </button>
                <ul class="dropdown-menu" [ngClass]="{'show':r.isOpen}">
                    <li><a class="dropdown-item" href="#">Save Data</a></li>
                    <li><a class="dropdown-item" href="#">Fetch Data</a></li>
                </ul>
            </div>
        </div>
    </div>
</nav>

Dropdown指令代码 #

import { Directive, HostBinding, HostListener } from "@angular/core";

@Directive({
    selector: '[appDropdown]',
    exportAs: "appDropdown"
})
export class DropdownDirective {

    @HostBinding('class.show') isOpen = false;

    @HostListener('click') toggleOpen() {
        this.isOpen = !this.isOpen;
    }
}

解决方案 #

这个问题源于下拉菜单的定位样式配置错误，通过调整CSS即可修复：

• 确保父容器btn-group保持相对定位（Bootstrap默认已设置position: relative，若被其他样式覆盖需手动指定）
• 调整dropdown-menu的定位参数，让它在按钮下方显示而非覆盖：

添加以下CSS到全局样式文件或组件样式中：

.dropdown-menu {
  position: absolute;
  top: 100%; /* 让菜单顶部对齐按钮底部 */
  margin-top: 0; /* 可根据需求调整数值增加按钮与菜单的间距，比如设为2px */
}

另外，你当前通过[ngClass]="{'show':r.isOpen}"控制菜单显示的逻辑是正确的，若使用新版本Bootstrap，只需确保该类能正常触发菜单的显示状态即可。

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