I have a drop-down navigation menu implemented on a website using CSS. The sub-menus appear when hovering over specific items. While this functionality works well on desktop, I am encountering an issue on touchscreens. When clicking outside the menu area, the menu does not automatically close. It seems that the touchscreen is unable to detect when I am interacting with elements outside the menu.
Essentially, I need a mechanism or trigger that signals the menu to close whenever I tap anywhere outside of it on the screen.
It appears that resolving this might require incorporating some Javascript or JQuery code. Simply manipulating the CSS will not suffice in achieving the desired behavior.
If needed, I can provide the CSS code responsible for creating the menu layout. However, the main concern lies in finding a solution to close the menu rather than just styling it.
EDIT:
Currently, the following snippet provides a partial fix. How can I modify it to exclude touches that occur within the menu itself?
$(document).bind('touchstart', function(event) {
event.preventDefault();
var target = event.target;
target = $(this);
alert("touched");
});
HTML
<div id="menu">
<ul id="nav">
<li class="taphover"><a href="#">Tools</a>
<ul>
<li><a href="#">Change Password</a></li>
</ul>
</li>