The site in question: americandream.org.es/en
I have been working on this bug for two days now. My main navbar has several clickable buttons with dropdown content. On Chrome for desktop (where I designed it) this works fine regardless of how you resize the window (responsively adapts to desktop, iPad, and mobile display modes), and the same is true with Firefox and Internet Explorer for desktop. The mobile version also works perfectly in Safari, Chrome, and Firefox on iPhone 5.
However, the dropdown content does not appear on click on the actual iPad in any browser I have tested (Firefox, Chrome, or Safari) and it does not appear in Safari for desktop, either. While the dropdown content displays in the Chrome browser for desktop, the debugger for Chrome does not display the dropdown content, either, but shows a box where the dropdown content should be displayed.
I can see in the Chrome debugger that the class .dropdown-content.show does activate and change from display: none to display: block on click, but it is just buried behind other page content. When I delete all other page content, I can see that the dropdown content is indeed toggling and displaying properly.
So I am deducing that the problem has something to do with how Safari and some browsers on iOS for iPad understand z-index? The navigation bar has a z-index: 9999, which .dropdown-content should inherit, but I know that there is more to z-index than that the biggest number always shows up on top.
But what exactly is wrong and how do I fix it? I have tried manually specifying opacity: 1 and z-index: 9999 for .dropdown-content, and I have tried adding the -webkit-transform: translate3d(0,0,0) hack described here and here to override iPad and force hardware acceleration, but maybe I am not implementing that hack correctly? Do I have the display settings set wrong in the navbar css? I am also confused as to how the exact same javascript and display settings work fine in every browser on iPhone but no browser on iPad.
Any insight is appreciated. I just started teaching myself web design about a month ago, so I'm sure it's a simple mistake, but I am lost.
Removing the overflow:hidden from ul.topnav will allow the dropdown to show