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

改善用户体验的另一个提示是添加this插件。

CSS菜单无法在平板电脑上运行

2 个答案: