Angular Navbar Menu - Aligning the menu item with the submenu

I am trying to align the menu item with the submenu. For example D Title has 2 subtitles as D Subtitle 1 and D Subtitle 2 and both of them has inner titles. But when I hover D Subtitle 2, the inner menu is not aligning with it. I have tried relative and absolute for innermenu class but it didn't work. How can I achieve it?

Source code: https://stackblitz.com/edit/angular-ivy-tzksqa

navbar.component.html

<div class="header" *ngFor='let menu of navigationService.navMenu'>
    <div class="header-title" (mouseover)="navigationService.openMenu(menu)">
        <p>{{menu.title}}</p>
    </div>

    <div [hidden]="!menu.isOpen">
        <div class="submenu" *ngIf="menu.menu">
            <span *ngFor="let submenu of menu.menu">
                <div class="submenu-item" (mouseover)="navigationService.openSubMenu(submenu)">
                    <p>{{submenu.title}}</p>
                </div>
            </span>
        </div>
    </div>

    <div *ngIf="menu.menu">
        <span *ngFor="let submenu of menu.menu">
            <div [hidden]="!submenu.isOpen">
                <div class="innermenu" *ngIf="submenu.innerMenu">
                    <span *ngFor="let innerMenuItem of submenu.innerMenu">
                        <div class="innermenu-item">
                            <p *ngIf="innerMenuItem.title">{{innerMenuItem.title}}</p>
                        </div>
                    </span>
                </div>
            </div>
        </span>
    </div>
</div>

navbar.component.less

:host {
    position: absolute;
    top: 0;
    left: 0;
    width: 400x;
    background-color: black;
    color: white;
    border-bottom: 5px solid black;
    font-size: 20px;

    .header {
        display: inline-block;
        position: relative;
        height: 40px;
        white-space: nowrap;
        padding: 0 10px;

        .header-title {
            line-height: 40px;

            & > p {
                display: inline-block;
                margin: 0 4px 0 8px;
            }
        }
    }

    .submenu {
        display: inline-block;
        position: absolute;
        top: 40px;
        left: 0;
        width: 150px;
        background-color: black;
        padding: 6px 0;

        .submenu-item {
            position: relative;
            padding: 5px 8px;
            
            & > p {
                display: inline-block;
                margin: 0 4px 0 8px;
            }
        }
    }

    .innermenu {
        display: inline-block;
        position: absolute;
        top: 40px;
        left: 150px;
        width: 150px;
        padding: 6px 0;
        background-color: black;

        .innermenu-item {
            position: relative;
            padding: 5px 8px;

            & > p {
                display: inline-block;
                margin: 0 4px 0 8px;
            }
        }
    }
}