PrimeNG p-menubar子菜单溢出视口问题求助

问题场景 #

使用PrimeNG的p-menubar时，右侧菜单（endMenuItems）的嵌套子菜单打开后会超出视口，导致出现水平滚动条。需要让这些嵌套子菜单向左展开，保持在视口范围内。

模板代码 #

<p-panel>
  <div class="d-flex">
    <div class="flex-grow-1">
      <p-menubar [model]="menuItems" styleClass="border border-0 rounded-0 pt-0 pb-0"></p-menubar>
    </div>
    <div>
      <p-menubar [model]="endMenuItems" styleClass="border border-0 rounded-0 pt-0 pb-0"></p-menubar>
    </div>
  </div>
</p-panel>

组件数据初始化代码 #

ngOnInit() {
  this.menuItems = [
    {
      label: "Label 1",
      icon: "",
      items: [
        { label: "Dummy Item 1" },
        { label: "Dummy Item 2" }
      ],
    },
    {
      label: "Label 2",
      icon: "",
      items: [
        { label: "Dummy Item 1" },
        { label: "Dummy Item 2" }
      ],
    },
  ];

  this.endMenuItems = [
    {
      label: "Label 1",
      icon: "",
      items: [
        { label: "Dummy Item 1" },
        {
          label: "Dummy Item 2",
          items: [
            { label: "Dummy Item 1" },
            { label: "Dummy Item 2" }
          ]
        }
      ]
    }
  ];
}

尝试过的无效自定义CSS #

之前尝试的CSS因优先级不足被PrimeNG默认样式覆盖：

::ng-deep .p-tieredmenu {
  .p-menuitem-active {
    .p-tieredmenusub {
      .p-submenu-list {
        right: 100% !important;
      }
    }
  }
}

可行解决方案 #

通过提高选择器权重，精准定位右侧菜单的嵌套子菜单，强制设置向左展开：

/* 定位右侧p-menubar的嵌套子菜单，强制向左展开 */
::ng-deep .p-menubar:last-child .p-tieredmenu .p-menuitem-active > .p-tieredmenusub .p-submenu-list {
  right: 100% !important;
  left: auto !important;
}

/* 修正最外层子菜单的基准位置，避免偏移 */
::ng-deep .p-menubar:last-child .p-tieredmenu .p-menuitem-active > .p-tieredmenusub {
  left: auto !important;
  right: 0;
}

原理说明：

• 使用:last-child精准选中页面右侧的p-menubar，避免影响左侧菜单
• 逐层选中激活菜单项的子菜单容器，通过right: 100%让子菜单从父项右侧向左延伸
• 覆盖默认的left属性，确保样式优先级高于PrimeNG的默认样式

内容的提问来源于stack exchange，提问作者Justin de Gois