I seem to be facing a minor issue where when I hover my mouse over the very top of a button, it is clickable. However, as soon as I move the cursor just slightly downward, a dropdown menu appears and I am no longer able to click on the button. https://i.sstatic.net/S80Jp.png Here's the codepen link for reference: https://codepen.io/amrouhab/pen/jObXxOy And here's the snippet of code that's causing this behavior:
<body>
<div id="header_bar">
<div id="header_bar_text" class="gpd-text">Syndicat Constructif, Partenaire du Dialogue Social
</div>
</div>
... (Code continues)
</nav>
</body>
Additionally, here are the relevant CSS styles being applied:
/* CSS Document */
@font-face {
font-family: "oswald";
src: url("fonts\oswald.regular.ttf");
font-family: "lato";
src: url("fonts\Lato-Regular.ttf");
font-family: "playfairdisplay";
src: url("fonts\PlayfairDisplaySC-Regular.otf");
}
... (CSS styles continue)
</nav>
Any insights or assistance in resolving this issue would be greatly appreciated! Thank you.