在纵向和横向方向上，菜单在iPad上表现不同

Question

我有一个使用CSS悬停的菜单来显示子菜单项。它在计算机上完美运行，我添加了一个黑客，使悬停在iPad上工作 - 我可以使用：活动状态。

JS：

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

CSS：

.nav ul ul{
    height:0;
    max-height:0;
    overflow:hidden;
}

.nav ul li:hover ul, 
.nav ul li:active ul{
    height:auto;
    max-height:200px;
}

但是，它在iPad上的纵向和横向方向上表现不同。它在横向上工作正常，但在纵向或放大时，子菜单会闪烁然后立即消失。

我已经创建了一个JSFiddle来试图演示。它有一些相当奇怪的行为，在景观中，点击菜单实际上导航到Twitter，即使代码中没有链接到Twitter？！在我的网站中，在横向上，单击菜单按预期工作。但即使它不能在我的实际应用程序中工作，你仍然可以看到两个方向之间存在很大差异。在肖像中，当我进入我的应用程序时，它会打开和关闭。

http://jsfiddle.net/qdEKL/4/

我已经搜索过，找出为什么在不同的方向（以及放大时）解释代码之间应该有区别，但找不到任何信息。