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

Question

我有这个 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 上不起作用 - 子菜单不显示它只是转到链接。

这是整个菜单的小提琴：http: //jsfiddle.net/q3eXH/

Answer 1

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

http://jsfiddle.net/Victornpb/q3eXH/3/

CSS

#cssmenu input[type="checkbox"]:checked + ul,
#cssmenu > ul > li:hover > ul {
    visibility: visible;
}

#cssmenu input[type="checkbox"]{
    display:none;
}

HTML

<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>

Answer 2

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

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

改善用户体验的另一个技巧是包含此插件。