title: PrimeNG Menubar Angular Styling
body: <p>I'm working on a project with primeng 4.3.0 &amp; Angular 4 and I'm creating an horizontal menu for my other pages. I can't change the version of these so here's the question:</p>
  
  <p>I'm using the menubar and trying to change it's color with ng-deep (cause there was no other way to change it). I read that to access the color of the submenus is creating a new class and calling to ul li:nth-child and each child has a number, so you can change it. The problem is:</p>
  
  <p>1) for the first submenu I created only two items and for the second one 5. When I call ul li:nth-child(3) it creates a new line on the first submenu as the image shows. </p>
  
  <p>2) the first and second submenu has a white border line on top that I can't get rid of it.</p>
  
  <p>Am I doing something wrong or is it a bug? Here's the code &amp; image:</p>
  
  <p>Template:</p>
  
  <pre><code>&lt;section&gt;
    &lt;div id="menu-box2"&gt;
      &lt;div class="container"&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-12"&gt;
            &lt;p-menubar #menu [model]="items" styleClass="menucus"&gt;
            &lt;/p-menubar&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>TS:</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { MenuItem } from 'primeng/primeng';
  
  @Component({
    selector: 'app-report-base-page',
    templateUrl: './report-base-page.component.html',
    styleUrls: ['./report-base-page.component.scss']
  })
  export class ReportBasePageComponent implements OnInit {
    private items: MenuItem[];
    constructor() { }
  
    ngOnInit() {
      this.items = [
        {
          label: 'Riconciliazioni',
          items: [
            {
              label: 'Nexi',
              routerLink: ['/report/nexi'],
              routerLinkActiveOptions: {
                exact: true
              }
            },
            {
              label: 'Tico',
              routerLink: ['/report/quisque'],
              routerLinkActiveOptions: {
                exact: true
              }
            }
          ]
        },
        {
          label: 'Fatturazione Tico',
          routerLink: ['/report/fat_quisque'],
          routerLinkActiveOptions: {
            exact: true
          }
        },
        {
          label: 'Partners fee',
          routerLink: ['/report/partnersfee'],
          routerLinkActiveOptions: {
            exact: true
          }
        },
        {
          label: 'SAP',
          items: [
            {
              label: 'Incasso',
              routerLink: ['/report/sap_incasso'],
              routerLinkActiveOptions: {
                exact: true
              }
            },
            {
              label: 'Transato',
              routerLink: ['/report/sap_transato'],
              routerLinkActiveOptions: {
                exact: true
              }
            },
            {
              label: 'Fee',
              routerLink: ['/report/sap_fee'],
              routerLinkActiveOptions: {
                exact: true
              }
            },
            {
              label: 'Ordini pagamento',
              routerLink: ['/report/sap_odp'],
              routerLinkActiveOptions: {
                exact: true
              }
            },
            {
              label: 'Esiti Pagamento',
              routerLink: ['/report/sap_edp'],
              routerLinkActiveOptions: {
                exact: true
              }
            },
          ]
        },
        {
          label: 'Flusso incassi',
          routerLink: ['/report/flussoInc'],
          routerLinkActiveOptions: {
            exact: true
          }
        },
        {
          label: 'Report Alfa Evolution',
          routerLink: ['/report/reportAlfa'],
          routerLinkActiveOptions: {
            exact: true
          }
        },
      ];
    }
  }
  </code></pre>
  
  <p>SCSS:</p>
  
  <pre><code>
  
  ::ng-deep .menucus ul li:nth-child(1) {
      background: #5393bc;
  }
  ::ng-deep .menucus ul li:nth-child(2) {
      background: #5393bc;
  }
  ::ng-deep .menucus ul li:nth-child(3) {
      background: #5393bc;
  }
  ::ng-deep .menucus ul li:nth-child(4) {
      background: #5393bc;
  }
  ::ng-deep .menucus ul li:nth-child(5) {
      background: #5393bc;
  }
  ::ng-deep .ui-menu .ui-menuitem .ui-menuitem-link:hover{
      background-color: #5393bc;
  }
  ::ng-deep .ui-menu,.ui-menu .ui-menu-child{
      border: 0px;
      background:#5393bc 0 0 repeat-x !important;
  }
  ::ng-deep .ui-menu .ui-menuitem .ui-state-active{
      background-color: #5393bc;
  }
  ::ng-deep .ui-menu .ui-menuitem.ui-menuitem-active&gt;.ui-menuitem-link,
  .ui-menu .ui-menuitem .ui-menuitem-link:hover{
      background-color:#186ba0;
  }
  </code></pre>
  
  <p>Here's the image</p>
  
  <p><a href="https://i.imgur.com/UCTNpmW.png" rel="nofollow noreferrer">https://i.imgur.com/UCTNpmW.png</a></p>