menu jumps to top with mdl-layout__header--waterfall mdl-layout__header--waterfall-hide-top

I modified the portfolio template example
with the

```

```

Note I had to add overflow: visible for the menu to appear

and added the menu for the about link

```

• File


• Save


• Exit

Here is the live example https://codepen.io/sonwh98/pen/ZWvPYR?editors=1000

The problem is when you scroll down so that the top part of the header is collapsed, clicking on the about link causes the menu to appear above the about link.

Does this have anything to do with the note at https://www.getmdl.io/components/index.html#menus-section:

```
Note: The menu requires a non-static positioned parent element. Positioning options may not work properly if the menu is inside of a statically positioned node.
```

Is there a fix or a work around to this? I want the mdl-layout__header--waterfall mdl-layout__header--waterfall-hide-top behavior for the header that has drop down menus that behaves as expected and not appear at the top of the link that triggered the menu.