Html CSS菜单在平板电脑上不起作用

我有一个HTML，用于我的菜单：

<div id="cssmenu">
    <ul>
        <li><a href="#"><span>Homepage</span></a></li>
        <li><a href="#"><span>Projects</span></a></li>
        <li><a href="#"><span>Services</span></a>
            <ul>
                <li><a href="#"><span>LINK</span></a></li>
            </ul>
        </li>
        <li><a href="#"><span>Contact Us</span></a></li>
    </ul>
</div>

子菜单链接在iPad上不起作用-子菜单不显示它只是指向链接

---

下面是整个菜单的一个小提琴：

此脚本将使触摸设备在点击时显示活动状态：

document.addEventListener("touchstart", function(){}, true);

---

另一个改善用户体验的技巧是加入插件。

此脚本将使触摸设备在点击时显示活动状态：

document.addEventListener("touchstart", function(){}, true);

---

改善用户体验的另一个技巧是添加插件。

您可以使用复选框使用CSS切换下拉列表，无需Javascript

CSS

HTML

服务

您可以使用复选框使用CSS切换下拉列表，无需使用Javascript

CSS

HTML

服务

我也没有看到JSFIDLE中显示任何子菜单。你是不是碰巧错过了一些javascript？鼠标悬停在服务上-在小提琴上对我有用？你是说鼠标悬停子菜单没有显示（在平板电脑中）？哦，我明白了，我的浏览器窗口太小了。鼠标悬停在平板电脑/ipad上真的没有意义。您可以进行一些设备检测，并为这些用户提供另一个选项。这里有一些想法：我也没有看到JSFIDLE中显示任何子菜单。你是不是碰巧错过了一些javascript？鼠标悬停在服务上-在小提琴上对我有用？你是说鼠标悬停子菜单没有显示（在平板电脑中）？哦，我明白了，我的浏览器窗口太小了。鼠标悬停在平板电脑/ipad上真的没有意义。您可以进行一些设备检测，并为这些用户提供另一个选项。这里有一些想法：

<li>
    <label for="c1">
        <span>Services</span>
    </label>
    <input type="checkbox" id="c1">

    <!-- sub-menu -->
    <ul>
        <li><a href="#"><span>LINK</span></a></li>
    </ul>
</li>