2021 年悬停下拉菜单是否适用于移动设备？

Question

我知道触摸屏设备没有悬停功能。然而，似乎如果我点击一个 div 那么它就像应用了伪类悬停一样。

例如，我不明白这个问题 Changing :hover to touch/click for mobile devices - 因为对我来说，给定的 js-fiddle 适用于 Chrome 提供的所有模拟移动设备。然而，那里说这不起作用：

<块引用>

如您所见，:hover 在移动设备上不起作用

同样从这里 Does css hover work on mobile devices? 在我看来，悬停一般不适用于移动设备。

在 https://webdesign.tutsplus.com/articles/best-practices-for-responsive-dropdown-menus--cms-35212 甚至建议为点击添加事件侦听器（第 3 项），但仅将其应用于 document.documentElement.clientWidth < 960 以避免在桌面上出现悬停和点击干扰。

但是，当我尝试使用 Chrome 检查工具从下方使用简单的悬停下拉代码段以供所有可能的移动设备选择时，然后单击按预期工作（单击后我无法关闭子菜单，但没关系，因为对于一个真正的网站，我会有一个汉堡包菜单）。

li {
    padding: 50px;
    border: solid;
}
.submenu {
    display: none;
}
.submenu-container:hover .submenu {
     display: block;
}
ul{
  list-style: none
}
li {
  display: block;
}

<ul  id="main-list">
    <li><a href="#">Hallo</a></li>
    <li>
        <div class="submenu-container">
            <button>Dropdown</button>
            <div class="submenu">
                <ul>
                    <li><a href="#">Item A</a></li>
                    <li><a href="#">Item B</a></li>
                    <li><a href="#">Item C</a></li>
                </ul>
            </div>
        </div>
    </li>
</ul>

我的问题是，Chrome 检查工具是否正确，或者在移动设备上悬停时单击不起作用？有什么我不知道的问题吗？我不明白所有这些 SO 问题，如果它似乎开箱即用，如何使悬停在移动设备上工作。