Angular CDK Menu opens at the bottom of the page

I've implemented the CDK Menu from the documentation (doc) in my app.

Here's what I've done:

1. Install the CDK:
   npm i @angular/cdk

2. Import the menu cdk in app.module.ts and use it in the "imports" section:
   import { CdkMenuModule } from '@angular/cdk/menu'
imports: [BrowserModule, CdkMenuModule]

3. Create the menu in my app.component.html

   <button [cdkMenuTriggerFor]="menu" class="example-standalone-trigger">Click me!</button>
   <ng-template #menu>
     <div class="example-menu" cdkMenu>
       <button class="example-menu-item" cdkMenuItem>Refresh</button>
       <button class="example-menu-item" cdkMenuItem>Settings</button>
       <button class="example-menu-item" cdkMenuItem>Help</button>
       <button class="example-menu-item" cdkMenuItem>Sign out</button>
     </div>
   </ng-template>
   <hello-world></hello-world>
   

The problem is that when I click on the button, the menu opens at the bottom of the page instead of just under the button.

Here's a Stackblitz that shows the problem: https://stackblitz.com/edit/f1y9wh
I've followed this example from the documentation (their stackblitz works correctly): menu-with-standalone-trigger

Ok so if anyone have this problem, you have to import this in your styles.scss:

@import '@angular/cdk/overlay-prebuilt.css';

It's coming from the CDK Overlay: https://material.angular.io/cdk/overlay/overview
But somehow it's not written in the CDK Menu documentation that you have to import this CSS...