Html 嵌套UL-CSS响应菜单锚问题

我有一个简单的HTML

<ul>
    <li class="item">
        <a href="javascript:void(0);">Parent</a>
        <ul class="sub-items">
            <li><a href="child-url.html">Child</a></li>
            <li><a href="child-url.html">Child</a></li>
        </ul>
    </li>
    <li class="item">
        <a href="javascript:void(0);">Parent</a>
        <ul class="sub-items">
            <li><a href="child-url.html">Child</a></li>
            <li><a href="child-url.html">Child</a></li>
        </ul>
    </li>
    <li class="item">
        <a href="javascript:void(0);">Parent</a>
        <ul class="sub-items">
            <li><a href="child-url.html">Child</a></li>
            <li><a href="child-url.html">Child</a></li>
        </ul>
    </li>
</ul>

这个简单的CSS

<style>
.sub-items {
    display: none;
}

.item:hover .sub-items {
    display: block;
}
</style>

.分项{
显示：无；
}
.项目：悬停.子项目{
显示：块；
}

这在桌面上有效，但在移动设备上，当您触摸第二个或第三个父项时，会自动打开子url。如果不使用javascript，我如何避免这种情况

---

提前感谢

根据移动设备，悬停功能作为点击或激活事件工作，因此更好的方法是

。项：激活。子项{display:block；}

我们可以通过媒体查询使用吗

。子项{
显示：无；
}
@仅介质屏幕和（最大宽度：1240px）{
.项目：悬停.子项目{
显示：块；
}
}
@仅介质屏幕和（最大宽度：480px）{
.项目：活动的.子项目{
显示：块；
颜色：红色
}
}

同时发布您的脚本，说明您已经尝试过如何使用

作为父脚本，如果您不希望它可以单击？@domenik reitzner它无法解决问题。这是一个移动版的可触摸区域，我想它可以提高屏幕阅读器的检测或其他功能。。。但是，请让我们把重点放在这个问题上。您在没有

的情况下试过吗？请您详细解释一下。您想在单击父元素后打开子元素吗？我同意，但问题仍然存在，它一直在“冒泡”，您按下第二个父元素，然后您还将单击子链接给每个父元素一个不同的类名并进行检查。您无法根据屏幕尺寸确定设备是否支持悬停，这绝对是错误的做法。我认为这与悬停动作有关，关于悬停如何在触摸屏设备上工作的文章很少。请检查此链接，例如：