I am facing an issue with the navigation menu on my website. It works perfectly fine on desktop and Apple devices, but on Android devices using Chrome, there is a problem. The submenu opens correctly, but when trying to click on a link within the submenu, it closes abruptly without redirecting to the desired page. I have tried multiple solutions found online, but haven't been successful so far. Below is the simplified version of the code. Any help would be greatly appreciated.
<nav id="nav">
<ul>
<li>Main 1</a>
<ul>
<li><a href="http://www.stackoverflow.com">Submenu 1</a></li>
<li><a href="http://www.stackoverflow.com">Submenu 2</a></li>
</ul>
</li>
<li>Main 2
<ul>
<li><a href="http://www.stackoverflow.com">Submenu 1</a></li>
<li><a href="http://www.stackoverflow.com">Submenu 2</a></li>
<li><a href="http://www.stackoverflow.com">Submenu 3</a></li>
</ul>
</li>
<li>Main 3
<ul>
<li><a href="http://www.stackoverflow.com">Submenu 1</a></li>
<li><a href="http://www.stackoverflow.com">Submenu 2</a></li>
<li><a href="http://www.stackoverflow.com">Submenu 3</a></li>
</ul>
</li>
</ul>
</nav>
nav ul li ul {
display: none; }
nav ul li:hover > ul {
display: block; }