Playwright: Cannot open dropdown to click on a link

Question

right now I'm having trouble to open a dropdown on a site and click on a specific link inside. Usually it is enough to click or hover on the element (a-Tag with text Header Link in the example below) in the navbar for the dropdown to open, but whenever I'm trying to run the test locally, it's telling me the element (a-Tag with text Dropdown Link 1 in the example below) wasn't visible when trying to click it.

<nav class="main-navigation">
    <ul class="main-navigation__list">
        <li class="main-navigation__item main-navigation__item--has-child">
            <a class="main-navigation__link " href="/somewhere" aria-haspopup="true" aria-expanded="false">
                Header Link
            </a>
            <div class="sub-navigation">
                <ul class="sub-navigation__list sub-navigation__list--parent">
                    <li class="sub-navigation__item">
                        <p>Some text here...</p>
                        <ul class="sub-navigation__list sub-navigation__list--child">
                            <li class="sub-navigation__item">
                                <a class="sub-navigation__link" href="/somewhere/link_1">Dropdown Link 1</a>
                            </li>
                            <li class="sub-navigation__item"></li>
                            <li class="sub-navigation__item"></li>
                            <li class="sub-navigation__item"></li>
                        </ul>
                    </li>
                    <li class="sub-navigation__item"></li>
                </ul>
            </div>
        </li>
    </ul>
</nav>

This is one the many versions I tried:

test("Example", async () => {
    // When trying one of these solution, playwright can't find the element.
    // await this.page.getByRole("link", { name: "Header Link"}).click();
    // await this.page.getByRole("link", { name: "Header Link"}).hover();

    // This locator works...
    const top_link = this.page.locator('.main-navigation >> .main-navigation__list >> li >> a:has-text("Header Link")');
    await expect(top_link).toBeVisible();
    await top_link.click()
    // Try to click on the now visible - if it would work - link inside the dropdown
    // ...
});

The test always stops after verifying that the element is visible with the following error message:

Call log:
    - waiting for locator('.main-navigation').locator('.main-navigation__list').locator('li').locator('a:has-text("Header Link")')
    - locator resolved to <a aria-haspopup="true" aria-expanded="false" href=…>…</a>
    - attempting click action
    - waiting for element to be visible, enabled and stable
    - element is visible, enabled and stable
    - scrolling into view if needed

Also when running the test with --headed, I can sometimes see the animation from the dropdown opening for a split second, before running into the error again. Trying to let the test wait with await this.page.waitForTimeout(5000); before trying to click the link inside the dropdown didn't help either.

Does anyone have an idea or maybe experienced this before?

Have a nice day!