PrimeNG Menubar Angular Styling

Question

I'm working on a project with primeng 4.3.0 & 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:

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:

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.

2) the first and second submenu has a white border line on top that I can't get rid of it.

Am I doing something wrong or is it a bug? Here's the code & image:

Template:

<section>
  <div id="menu-box2">
    <div class="container">
      <div class="row">
        <div class="col-12">
          <p-menubar #menu [model]="items" styleClass="menucus">
          </p-menubar>
        </div>
      </div>
    </div>
  </div>
</section>

TS:

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
        }
      },
    ];
  }
}

SCSS:

::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>.ui-menuitem-link,
.ui-menu .ui-menuitem .ui-menuitem-link:hover{
    background-color:#186ba0;
}

Here's the image

https://i.sstatic.net/lorKk.png

Answer 1

I found the solution. I had to create a new class and bind it to each item with styleClass. changes: TS:

{
        label: 'Riconciliazioni',
        items: [
          {
            label: 'Nexi',
            routerLink: ['/report/nexi'],
            routerLinkActiveOptions: {
              exact: true
            },
            styleClass: 'menucus'
          },
          {
            label: 'Tico',
            routerLink: ['/report/quisque'],
            routerLinkActiveOptions: {
              exact: true
            },
            styleClass: 'menucus'
          }
        ]
      }

SCSS:

::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-menuitem-link:hover{
    background-color: #5393bc;
}
::ng-deep .ui-menu .ui-menuitem .ui-state-active{
    background-color: #5393bc;
}
::ng-deep .ui-menu .ui-menuitem.ui-menuitem-active>.ui-menuitem-link,
.ui-menu .ui-menuitem .ui-menuitem-link:hover{
    background-color:#186ba0;
}
::ng-deep .menucus{
    background: #5393bc !important;
}

styleClass was added to each item on the TS.