我使用 HTML 和 CSS 设计了一个网站。它包括三级导航菜单，并且在桌面上运行良好。但是在触摸设备(智能手机和平板电脑)中会出现一个问题，即当触摸父菜单的元素时，子菜单仍未显示，因为没有鼠标悬停在该元素上。
我该如何解决这个问题？
这是菜单的代码:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<meta chrset="utf-8">
<meta name="author" content="ralph phillips">
<style>
* {margin:0px; padding:0px;}
body {font-family:verdana;background-color:#ABC;}
h1{text-align:center;border-bottom:2px solid #009;margin-bottom:50px;}
ul#navmenu, ul.sub1, ul.sub2{list-style:none;font-size:9pt;}
ul#navmenu li{width:125px;text-align:center;position:relative;float:left;margin-right:4px;}
ul#navmenu a{text-decoration:none;display:block;width:125px;height:25px;line-height:25px;background-color:#fff;border:1px solid #ccc;border-radius:5px;}
ul#navmenu .sub1 li{}
ul#navmenu .sub1 a{margin-top:5px;}
ul#navmenu .sub2 a{margin-left:10px;}
ul#navmenu li:hover > a{background-color:#cfc;}
ul#navmenu li:hover a:hover{background-color:#ff0;}
ul#navmenu ul.sub1{display:none;position:absolute;top:26px;left:0px;}
ul#navmenu ul.sub2{display:none;position:absolute;top:0px;left:126px;}
ul#navmenu li:hover .sub1{display:block;}
ul#navmenu .sub1 li:hover .sub2{display:block;}
</style>
</head>
<body>
<h1>navigation menu</h1>
<ul id="navmenu">
<li><a href="#">hyperlink1</a></li>
<li><a href="#">hyperlink2</a>
<ul class="sub1">
<li><a href="#">hyperlink2.1</a></li>
<li><a href="#">hyperlink2.2</a></li>
<li><a href="#">hyperlink2.3</a></li>
</ul>
</li>
<li><a href="#">hyperlink3</a></li>
<li><a href="#">hyperlink4</a>
<ul class="sub1">
<li><a href="#">hyperlink4.1</a></li>
<li><a href="#">hyperlink4.2</a></li>
<li><a href="#">hyperlink4.3</a>
<ul class="sub2">
<li><a href="#">hyperlink4.3.1</a></li>
<li><a href="#">hyperlink4.3.2</a></li>
<li><a href="#">hyperlink4.3.3</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">hyperlink5</a></li>
</ul>
</body>
</html>最佳答案
Can't hover in Touch devices.
对于在触摸设备上工作，您可以为此使用 Jquery Click 事件:
$("ul#navmenu li").click(function(){
$('.sub1').removeClass('display');
$(this).find('.sub1').addClass('display');
})
关于javascript - 如何处理触摸设备的多级下拉菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29948238/