CSS水平菜單不適用於觸摸設備

我有一個純CSS的水平菜單實現，可以在計算機上的瀏覽器上正常工作。該網站是www.intercessionsp.org。但是，在觸控設備上（具體來說，我嘗試過在iPad和iPhone上使用Safari），菜單不起作用。如果有子菜單（主菜單項正常工作），觸摸它們完全不會引起任何反應。我試圖實現兩個解決方案： 1.使用onclick =「返回true」，基於terraling在「懸停CSS上的iPad/iPhone觸摸事件」中的解決方案。 2.添加#ios ul {display：none; }和#ios li：hover ul {display：block; }根據Philip Renich在elfboy.com上發佈的一篇文章「讓CSS下拉菜單在iPhone上工作」。都沒有工作。CSS水平菜單不適用於觸摸設備

這裏是我的CSS文件的相關部分：

/* horizontal menus */ 
#nav, .nav, #nav .nav li { 
    margin:0px; 
padding:0px; 
} 
#nav li { 
float:left; 
display:inline; 
cursor:pointer; 
list-style:none; 
padding:10px 30px 10px 30px; 
border:1px #000 solid; 
position:relative; 
background: #990000; 
} 
#nav li ul.first { 
left:-1px; 
top:100%; 
} 
li, li a { 
color:#fff; 
text-decoration:none; 
} 
#nav .nav li { 
width:100%; 
text-indent:10px; 
line-height:30px; 
margin-right:10px; 
border-top:1px #000 solid; 
border-bottom:1px #000 solid; 
border-left:none; 
border-right:none; 
background:#990000; 
onclick="return true" 
} 
#nav li a { 
display:block; 
width:inherit; 
height:inherit; 
} 
ul.nav { 
display:none; 
} 
#nav li:hover > a, #nav li:hover { 
color:#990000; 
background:#fff; 
} 
li:hover > .nav { 
display:block; 
position:absolute; 
width:200px; 
top:-2px; 
left:30%; 
z-index:1000; 
border:1px #000 solid; 
} 
li:hover { 
position:relative; 
z-index:2000; 
} 

#basic li { 
color:#000; 
}

因爲我已經有顯示：塊在我李：懸停> .nav，我嘗試添加它來#nav李：懸停>一， #nav li：懸停（沒有期待這個工作）並且對li：懸停，但都沒有工作。我應該補充一點，我查看了Renich對設置寬度值的評論，但由於我已經設置了寬度值，這看起來沒有用處。

我想留在一個純粹的CSS實現。

來源

2012-11-17 BillInPoint