ul element is hidden behind another html element, z-index doesn’t work either

My application has a side menu that converts to a slimmer mode when clicking on a certain button. Some items in the menu have sub-menu items. The issue I am facing right now is that the sub-menu works fine when the menu is in expanded mode but it doesn’t work fine when in the slim mode. It’s hidden behind another element. I am attaching a screenshot for your reference, just to show you what I mean.

I am also attaching the css media query that corresponds to this

&.menu-layout-slim {
.layout-menu {
                    padding: 0;

                    > li {
                        position: relative;

                        &.layout-root-menuitem {
                            > .layout-menuitem-root-text {
                                display: none;
                            }

                            > a {
                                display: block;
                            }
                        }

                        > a {
                            text-align: center;
                            padding: 15px;
                            padding-left: 20px;

                            i:first-child {
                                font-size: 19px;
                            }

                            span:not(.p-ink), i.menuitem-toggle-icon {
                                display: none;
                            }

                            &:hover + .layout-menu-tooltip {
                                display: block;
                            }
                        }

                        > ul {
                            @include overlay-shadow();
                            border: 1px solid #cccccc;
                            background-color: $menuBg;
                            position: absolute;
                            top: 0;
                            left: 73px;
                            display: none;
                            min-width: 200px;
                            border-radius: $borderRadius;


}

I am also attaching the sub menu component for your reference

<ng-template ngFor let-child let-i="index" [ngForOf]="root ? item : item.items">
  <li [ngClass]="{ 'active-menuitem': isActive(i) }" [class]="child.badgeStyleClass"
    *ngIf="child.visible === false ? false : true">
    <a [href]="child.url || '#'" (click)="itemClick($event, child, i)" (mouseenter)="onMouseEnter(i)" class="ripplelink" [name]="child.key"
      *ngIf="!child.routerLink" [attr.tabindex]="!visible ? '-1' : null" [attr.target]="child.target"  [tooltipDisabled]="!app.isSlim()" pTooltip="{{child.label}}" tooltipPosition="right">
      <i [ngClass]="child.icon" class ="col-icon"></i><span>{{ child.label }}</span>
      <i class="fa fa-fw fa-angle-right menuitem-toggle-icon" *ngIf="child.items"></i>
      <span class="menuitem-badge" *ngIf="child.badge">{{ child.badge }}</span>
    </a>

    <a (click)="itemClick($event, child, i)" (mouseenter)="onMouseEnter(i)" class="ripplelink" *ngIf="child.routerLink" [name]="child.key"
      [routerLink]="child.routerLink" routerLinkActive="active-menuitem-routerlink"  [tooltipDisabled]="!app.isSlim()" pTooltip="{{child.label}}" tooltipPosition="right"
      [routerLinkActiveOptions]="{ exact: true }" [attr.tabindex]="!visible ? '-1' : null" [attr.target]="child.target" style="height: '*'">
      <i [ngClass]="child.icon" class ="col-icon"></i><span>{{ child.label }}</span>
      <i class="fa fa-fw fa-angle-right menuitem-toggle-icon" *ngIf="child.items"></i>
      <span class="menuitem-badge" *ngIf="child.badge">{{ child.badge }}</span>
    </a>
    <div class="layout-menu-tooltip">
      <div class="layout-menu-tooltip-arrow"></div>
      <div class="layout-menu-tooltip-text">{{ child.label }}</div>
    </div>
    <div class="submenu-arrow" *ngIf="child.items"></div>
    <ul app-submenu class="sub-menu" [item]="child" *ngIf="child.items" [visible]="isActive(i)" [reset]="reset"
      [parentActive]="isActive(i)" [@children]="
              (app.isSlim() || app.isHorizontal()) && root
                  ? isActive(i)
                      ? 'visible'
                      : 'hidden'
                  : isActive(i)
                  ? 'visibleAnimated'
                  : 'hiddenAnimated'
          "></ul>
  </li>
</ng-template>

I have tried making the position as fixed but it throws the sub-menu to the top and it could be an issue as I need the sub-menu in fron of the respective menu item.

I am also attaching the animations property of the component in the ts file.

@Component({
  // tslint:disable-next-line:component-selector
  selector: '[app-submenu]',
  templateUrl: './app-sub-menu.component.html',
  styleUrls: ['./app-sub-menu.component.scss'],
  animations: [
    trigger('children', [
      state(
        'hiddenAnimated',
        style({
          height: '0px'
        })
      ),
      state(
        'visibleAnimated',
        style({
          height: '*'
        })
      ),
      state(
        'visible',
        style({
          display: 'block'
        })
      ),
      state(
        'hidden',
        style({
          display: 'none'
        })
      ),
      transition('visibleAnimated => hiddenAnimated', animate('400ms cubic-bezier(0.86, 0, 0.07, 1)')),
      transition('hiddenAnimated => visibleAnimated', animate('400ms cubic-bezier(0.86, 0, 0.07, 1)'))
    ])
  ]
})

Let me know in the comments if I need to provide any other detail that help you in debugging the issue.