I'm very new to Javascript, so I apologize in advance for what some might consider to be a simple matter.

So I have this dropdown menu.  It was working perfectly on my test page when that was all that I had going.  Then I added the code to one of the pages that I am working on for my site, and I started to see issues.  Mainly, the menu works, but when the dropdown appears all of the content underneath drops down below the menu.

I've done some research, and it looks like my issue might be related to a styling mishap.  I have seen references to position:relevant and position:absolute.  With position:relevant, the dropdown appears exactly where it should, but it pushes everything else down.  With position:absolute, the page content stays put but the dropdown menu is thrown down to the bottom of the page where you can't access it.

I would greatly appreciate it if someone could give me a point in the right direction.

Here is my code at JSFiddle - https://jsfiddle.net/sgu6nu5w/6/.

Thanks in advance!