iPad在我的网站上做什么，有办法解决吗？

我最近开始从事网页设计，但我绝不是一个专家。我正在为自己开发这个网站，我似乎有一些问题。这个网站在所有浏览器中看起来都差不多（仍在开发中），我一直在研究平板电脑和手机特有的css。在为iPad做测试时（我使用xCode iOS Sim卡），我注意到我的菜单栏除了在看起来像是随机的时刻（通常是在放大的时候）之外没有工作。我让一个家庭成员在他们的物理iPad上测试了这个，他们根本不能使用导航条。此链接包含运行导航栏的html和css。我将在接下来的几个小时里处理这个问题，如果我发现了，我会更新或删除这个帖子，但是如果我不知道，任何帮助都是非常感谢的

这只是html，css太长了

<h2><a href="/">Auburn PC Repair<br>& Building</a></h2>
<div id="header-image">
    <h1></h1>
</div>

<nav id="buttonbar">
    <ul>
        <li id="services-button"><div class="buttonHighlight"></div>
            <a href="#" class="button"><h3>Our Services</h3><p>how can we help you</p></a>
            <ul>
                <li><a href="/services/pcrepair">PC Repair</a></li>
                <li><a href="/services/mobiledev">Mobile Device</a></li>
                <li><a href="/services/networking">Networking</a></li>
                <li><a href="/services/pcbuilding">PC Building</a></li>
            </ul>
        </li>
        <li id="contact-button"><div class="buttonHighlight"></div>
            <a href="/contact" class="button"><h3>Contact Us</h3><p>phone and email</p></a>
        </li>
        <li id="about-button"><div class="buttonHighlight"></div>
            <a href="/about" class="button"><h3>About Us</h3><p>all about us</p></a>
        </li>
    </ul>
</nav>

编辑：导航栏是围绕www.panic.com/coda导航栏设计的。它在iPad上运行得很好。

---

编辑：当前设置适用于所有非iOS设备。

您的导航依赖于悬停事件来触发菜单内容的显示

鼠标在元素上移动会触发悬停事件

触摸设备，如所有iOS设备，以及大多数（如果不是全部的话）当代智能手机和平板电脑，都没有鼠标，因此无法触发悬停事件

仅使用CSS无法在当代触摸设备上实现所需功能

---

使用JavaScript可以触发和响应各种与触摸相关的事件。您需要选择不使用基于CSS的菜单触发方法，而是使用基于JavaScript的方法，处理悬停和触摸事件以生成所需的菜单系统。

hove仅用于第一个菜单，我给了它一个“#”，以便它在触摸设备上保持打开状态。我用我的室友华硕平板电脑测试了它的功能，它工作得很好。它在我的手机上也能正常工作。（宏达迅雷）