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

我有一个菜单，它使用CSS悬停来显示子菜单项。它在计算机上工作得非常好，我还添加了一个使悬停在iPad上也能工作的黑客程序——我可以使用：活动状态

JS:

CSS:

然而，它在iPad上的纵向和横向表现有所不同。它在横向效果很好，但在纵向或放大时，子菜单会闪烁，然后立即消失

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

我搜索了一下，想找出为什么代码在不同方向（以及放大时）的解释方式会有所不同，但找不到任何信息

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

.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;
}