Css 如何将菜单栏的prime ng子菜单向右对齐？

我有侧栏和水平导航栏。我使用prime ng（9.1.3版）菜单栏

nav-bar-component.html

  <p-menubar [model]="items"></p-menubar>

nav-bar-component.scss

:host ::ng-deep .ui-menubar .ui-menubar-root-list {
  float: right;
}

菜单栏的子菜单将退出屏幕。我们如何纠正这个问题

---

问题在于html上的y轴有溢出：

在全局css上使用此选项：

body, html {
  overflow-y: hidden;
}

您可以尝试使用

右键：0

样式。css

.align-right .p-menubar-root-list>li:last-child .p-submenu-list {
  right: 0;
}

.html

<p-menubar [model]="items" styleClass="align-right"> <!-- declare class here -->
    <div>
        <input type="text" pInputText placeholder="Search">
        <button type="button" pButton label="Logout" icon="pi pi-power-off" style="margin-left:.25em"></button>
    </div>
</p-menubar>

---

演示

@DheepakS嗯，我明白了，没有变化吗？尝试添加最大宽度：100vw；

<p-menubar [model]="items" styleClass="align-right"> <!-- declare class here -->
    <div>
        <input type="text" pInputText placeholder="Search">
        <button type="button" pButton label="Logout" icon="pi pi-power-off" style="margin-left:.25em"></button>
    </div>
</p-menubar>