title: How to align prime ng submenu of the menu bar to right?
body: <p>I have side bar and the horizontal nav bar. I use prime ng(version 9.1.3) menu bar.</p>
  <p>nav-bar-component.html</p>
  <pre><code>  &lt;p-menubar [model]=&quot;items&quot;&gt;&lt;/p-menubar&gt;
  
  </code></pre>
  <p>nav-bar-component.ts</p>
  <pre><code>export class NavBarComponent implements OnInit { 
  
    items: MenuItem[];
  
    constructor() {
      
    }
  
    ngOnInit() {
      this.items = [
        {
          label: &quot;User&quot;,
          icon: &quot;pi pi-fw pi-user&quot;,
          items: [
            { label: &quot;Profile&quot;, icon: &quot;pi pi-fw pi-user&quot; },
            { label: &quot;Change Password&quot;, icon: &quot;pi pi-fw pi-cog&quot; },
            { label: &quot;Log Out&quot;, icon: &quot;pi pi-fw pi-power-off&quot; },
          ],
        },
      ];
    }
  }
  
  </code></pre>
  <p>nav-bar-component.scss</p>
  <pre><code>:host ::ng-deep .ui-menubar .ui-menubar-root-list {
    float: right;
  }
  
  </code></pre>
  <p>The submenu of the menu bar goes out of the screen. How can we rectify the issue?</p>
  <p><a href="https://i.stack.imgur.com/ypWmy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ypWmy.png" alt="enter image description here" /></a></p>