css菜单在iPad中保持打开状态

Question

我有一个css菜单，打开一个子菜单onclick。问题是当选择子菜单时它打开页面，但菜单不会被隐藏。它一直打开，直到我们点击iPad屏幕上的任何地方。

CSS

.menuDiv:hover>.submenuDropdown, .menuDiv:focus>.submenuDropdown {
visibility: visible;
opacity: 1;
}

.submenuDropdown {
background: #fff;
position: absolute;
width: auto;
min-width: 250px;   
list-style:none;
margin: 0;
padding: 0;
visibility: hidden;
opacity: 0;
}

HTML

<div class="menuDiv">
<ul class="submenuDropdown">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>

submenuDropdown ul始终保持打开状态。