details-polyfill | Polyfill for the HTML5 details element , no dependencies | Build Tool library

I'm trying to build a responsive and accessible navigation. To do so, I'm using

I played around with it for a while and have the mobile version as needed. However, I'm running into a problem with the positioning of the dropdowns in the non-mobile version.

In the linked example, the dropdowns appear directly under the respective parent item. As far as I can see, this is achieved by using position: absolute. When trying this in my adapted version, the dropdown moves to the upper left corner of the navigation bar. If I change the positioning, the items are aligned correctly, however, they don't appear as a dropwdown but rather as new lines. Thereby, they move the whole navigation bar.

Can someone spot where my mistake lies?

I've added all code below. I haven't changed anything in the javascript and just added it here so running the code snippet will actually reproduce the problem.

Thanks a lot for any help in advance!