Html iOS/Safari中的纯CSS菜单，避免悬停/单击状态；粘住；和锚依赖？

请看这里的小提琴：

这里有一个漂亮的CSS3/HTML5悬停菜单。。。从我测试的结果来看，在最近的IE/Firefox/Chrome/Opera版本中，它在我的Windows PC上运行良好。。。在我的iPad2迷你版上进行狩猎旅行。在简陋的Azpen安卓平板电脑上似乎还可以。（尽管对HTML5/CSS3还比较陌生，但还是可以随意评论/优化它。）

尽管如此，我还是对iOS/Safari中的行为感到好奇。。。首先是一些我认为最相关的代码片段（但大部分都在处理中）：

现在谈谈我的问题

---

有没有更好的变通方法（少黑客攻击）在iOS上实现悬停状态，而不强制在所有列表项上设置锚？我只是在选择从主菜单列表中删除链接时才注意到这个问题

另一个问题是关于悬停状态“粘滞”。有没有一种方法可以在我的CSS中松开/取消粘滞，这样菜单就不会无限期地保持不动？如果要单击子菜单项，菜单可以打开，但如果要缩小，请单击“远离”，浏览元素。在此处，子菜单保持活动状态，显示并隐藏其正下方的任何内容

---

最好，我希望只使用CSS/HTML保留页面/内容。谢谢。

“在所有列表项上不强制锚定”是什么意思？看看

    <li><a href="#">Foo</a> </li> <!-- anchor allows click/hover states -->
    <li><a href="#">Bar</a>
        <ul>
            <li><a href="#">Bar 1</a>
            </li>
            <li><a href="#">Bar 2</a>
            </li>
            <li><a href="#">Bar 3</a>
            </li>
            <li><a href="#">Bar 4</a>
            </li>
        </ul>
    </li>
<li>Qux</li> <!-- won't react to hover/click on iOS -->

/* on hover, color background */
nav li:hover
{
    color: white;
    background: rgba(123,255,0,.35);
}

nav li li { display: none; } /* suppress sublist entities*/
nav li:hover li { display: block; } /* until main list hovered over */