I recently created a website using HTML and CSS with a three-level navigation menu that worked perfectly on desktop. However, the issue arises when users access the site from touch devices like smartphones or tablets because the sub-menu does not appear when they tap on the parent menu item due to the lack of a cursor for hovering.
Can anyone suggest a solution to this problem?
Below is the code snippet for the menu:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<meta charset="utf-8">
<meta name="author" content="John Doe">
<style>
/* CSS styles here */
</style>
</head>
<body>
<h1>Navigation Menu</h1>
<ul id="navmenu">
<li><a href="#">Hyperlink 1</a></li>
<li><a href="#">Hyperlink 2</a>
<ul class="sub1">
<li><a href="#">Sublink 2.1</a></li>
<li><a href="#">Sublink 2.2</a></li>
<li><a href="#">Sublink 2.3</a></li>
</ul>
</li>
<li><a href="#">Hyperlink 3</a></li>
<li><a href="#">Hyperlink 4</a>
<ul class="sub1">
<li><a href="#">Sublink 4.1</a></li>
<li><a href="#">Sublink 4.2</a></li>
<li><a href="#">Sublink 4.3</a>
<ul class="sub2">
<li><a href="#">Sublink 4.3.1</a></li>
<li><a href="#">Sublink 4.3.2</a></li>
<li><a href="#">Sublink 4.3.3</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Hyperlink 5</a></li>
</ul>
</body>