コンピューターのブラウザーで正常に機能する水平メニューの純粋なCSS実装があります。ウェブサイトはwww.intercessionsp.orgです。ただし、タッチデバイス（具体的には、iPadとiPhoneでSafariを試しました）では、メニューが機能しません。サブメニューがある場合、それらに触れてもまったく応答しません（ホームメニュー項目は正常に機能します）。私は2つの解決策を実装しようとしました：1。stackoverflowの「ホバーCSSでのiPad/iPhoneタッチイベント」の質問のテラリングの解決策に基づいてonclick="returntrue"を使用します。2. #ios ul {display：none;を追加します。}および#iosli：hover ul {display：block; }「CSSドロップダウンメニューをiPhoneで機能させる」というelfboy.comへのPhilipRenichの投稿に基づいています。どちらも機能しませんでした。
これが私の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;
}
li：hover> .navにすでにdisplay：blockがあるので、それを#nav li：hover> a、＃nav li：hover（これが機能することを期待せずに）とli：hoverに追加しようとしましたが、どちらも働いた。幅の値を設定することについてのRenichのコメントを見たことを付け加えておきますが、すでに幅の値を設定しているので、これは役に立たなかったようです。
純粋なCSS実装を維持したいと思います。