After building this website from scratch using only HTML and CSS, I encountered an issue with the dropdown menu not appearing on iPhones. Despite testing it extensively across different browsers and devices, the problem persists on Apple products.
While initially suspecting that the lack of support for :hover on iPhones was to blame, further investigation revealed that the hover functionality wasn't the root cause. It turns out that the dropdown menu is actually present and functional, but invisible on iPhones. Clicking in the right area where the links should be still triggers them to work as intended. I've attempted various solutions like adding visibility: visible, z-index: 999, and experimenting with different display values, but the issue remains unresolved.
nav {
position: relative;
background: white;
border: .05em solid #004EA8;
width: 100%;
}
// More CSS code here...
</code></pre>
<pre><code><nav class="nav">
<nav class="navbar-items items-left">
// HTML code here...
</nav>
</nav>Despite numerous attempts to resolve this issue on iPhones, no solution has proven effective. Any assistance or insights would be greatly appreciated, as I have exhausted countless hours trying to troubleshoot this problem.
To view the complete HTML and CSS code for the navigation menu and dropdown functionality, please visit the website at