NavBar Dropdown injected into SquareSpace Header Disappearing on Hover

Question

I have a webpage with a simple navbar. The actual webpage can be seen here, and a CodePen demo can be seen here. In the CodePen demo, everything works fine. If I hover over a dropdown, the menu appears below. I can then seamlessly move my mouse down over that dropdown menu and select an option. In comparison, on the actual production website, things are not so smooth. The dropdown appears as expected, but as soon as I move my mouse down over the dropdown it disappears - it doesn't seem to register the hover event.

I've tried the following:

1. Setting z-index to be 1000 or 10000000 in the css for .dropdown
2. Doing step 1 with the added qualifier of !important;
3. In Chrome dev tools I tried giving other parts of the webpage lower z-index values, and it changed nothing

Notably, the drop-down is definitely hidden behind stuff. For example if I hover over Alumni, the options in the drop-down are occluded by the label of the website (in white font).

Is there some way other than messing with the z-index with which I can force my dropdown to register the hover event and work as expected? I am comfortable using Javascript, HTML, CSS, and any normal libraries such as Bootstrap or JQuery. Thanks!

EDIT: @lalitbhakuni's answer solved the problem for me. That said, it is possible that people who are dealing with the specifically identical circumstance to my own will run into this and wonder how to implement the CSS solution without access to the CSS for the entire web-page. Here is how I did it, in my banner code injection:

<script>
window.onload = function() { 
    var header = document.getElementById('header');
    header.style.zIndex = 10;
};
</script>

Answer 1

Your header is overlapping your navbar. The y nav dropdown is not working as a result. To fix this, can, you can please define header z_index as follows:

.transparent-header #header {
    z-index: 10;
}