iPadでCSSドロップダウンメニューが正常に機能しない

Question

私はデスクトップ上で期待どおりに機能するCSSのみのドロップダウンメニューを持っています。 iPadのモバイルSafariでは、トップレベルのナビゲーションリンクの1つがクリックされると、そのドロップダウンメニューが短く表示されますが、リンクがたどり着き、ユーザーは新しいページに移動します。

私はこれについて見つけ出すことができるすべてを読んでおり、デフォルトの動作は、iPadが最初のタップをホバーとして扱い、2番目のタップがあるまで実際にはリンクをたどらないと思われるようです。これは、:hoverスタイルがそのサブメニューのdisplayプロパティを変更するため、デバイスが最初のタップでリンクをたどらないことを知っているためです。

この動作は他のサイトでも適切に機能しており、ウェブサイトの他の部分でも正常に動作していますが、なんらかの理由でCSSドロップダウンメニューで正しく動作しません。

メニューは私のサイトhttps://www.storeyourboard.comで見ることができます。ページの上部近くにカテゴリ名をリストする水平メニューがあります。これをiPadで見ると、「Surfboard」などのメニュー項目の1つをタップすると、iPadが最初のタップでドロップダウンメニューを表示するのではなく、Surfboardページに移動することがわかります。不思議なことに、私のタッピングが予想どおりにランダムに動作し、ドロップダウンメニューがナビゲートせずに表示されることがありましたが、これはまれであり、一貫して再現することはできません。

これは、メニューに関連するマークアップです：私はonclick="return true"を加えることを言っていくつかの他の記事を見てきました

HTML

<ul class="mainNav-menu"> 
    <li> 
     <a href="/sup-racks-bags/">SUP</a> 
     <div class="mainNav-submenu"> 
      <ul class="mainNav-submenu-menu"> 
       <!-- Submenu items here --> 
      </ul> 
     </div> 
    </li> 
    <li> 
     <a href="/surfboard-racks-bags/">Surfboard</a> 
     <div class="mainNav-submenu"> 
      <ul class="mainNav-submenu-menu"> 
       <!-- Submenu items here --> 
      </ul> 
     </div> 
    </li> 
</ul> 

CSS

.mainNav-submenu { 
    display: none; 
    position: absolute; 
    left: 0; 
    right: 0; 
    top: auto; 
    background-color: #8a8a8a; 
    z-index: 20; 
    padding: 1rem; 
} 

.mainNav-menu > li:hover .mainNav-submenu { 
    display: block; 
} 

メニューのリンクやメニューコンテナが修正されますが、これには何の影響もありません私のために邪悪な。私はまた、サイト上でfastclick.jsを使用していることを言及する必要があります。私はこれが問題を引き起こしている可能性があると思ったが、私がそれを取り除くと全く同じ振る舞いを見た。

また、正しく動作するかどうかを確認するために、私のサイトにthis articleのコードを追加しました。言い換えれば、私は自分のサイトにこのコードの小さなスニペットを追加しました：

<style> 
    p {height: 100px;} 

    p span { 
     display: none; 
    } 

    p:hover span { 
     display: block; 
    } 
</style> 

<p> 
    <a href="/">Tap me</a> 
    <span>You tapped!</span> 
</p> 

これは（さえfastclickアクティブで）正しく働いていました。私がリンクをタップすると、「あなたがタップした」スパンが示されました。また、私が再びタップすると、私は遠ざかりました。

なぜこの同じ動作がナビゲーションメニューで正しく動作しないのかわかりません。私はそれをマークアップしたり、スタイリングしたりしているのですか？誰にも分かりますか？他に何をするべきか分かりません。以下のドキュメントの答えに

UPDATE

おかげで、私はこの解決策を考え出すことができました：

.mainNav-menu > li > a { 
    pointer-events: none; 
} 

.mainNav-menu > li:hover > a { 
    pointer-events: all; 
} 

現在では、サイト上でのライブだとあなたはアクションでそれを見ることができます。私はまだこれがなぜ必要なのか、なぜそれが元々動作しなかったのかわからないので、もし誰かが何らかのアイデアを持っているなら、私に知らせてください。

Answer 1

なぜaリンクをタップするとそれに従うかわかりませんが、これでも問題は解決します。

---

まず、すべてのタグとリンクに通常のテキストが含まれるようにします。だから、

<a href="/surfboard-racks-bags/">Surfboard</a> 

を保つだけでなく、リンクを作成し、これらの要素の両方が同じ内容とスタイル

を持っていることを確認してください

<p>Surfboard</p> 

を追加し、その隠されたので、デフォルトでdisplay: noneを持っています。しかし、divがホバリングされているときは、リンクを表示させ（display: inlineのようなもの）、他の非リンクdisplay: noneを与えます。理想的にはp要素がシームレスにすべて

デスクトップ用

に沿ってあったaかのように、まったく同じスタイルべきであるa要素、ユーザーはdiv要素をホバリングされていない場合、いかなる理由がありませんに置き換える必要がありますリンクの「リンク」部分をアクティブにする必要があるため、通常のテキストの代わりに使用します。ユーザーがdivをホバリングしているときにリンクが表示されるので、ユーザーはそのリンクを使用できます。

ただし、iOSユーザーがdivをタップすると、:hoverエフェクトがトリガーされますが、ではなく、のリンクがトリガーされます。彼/彼女がタップしたときにリンクが見えなかったので、それが引き起こされるべきではありません。ユーザーがまだリンクをクリックした場合、リンクがあまりにも速く

示されるかもしれないから、aとp要素にtransition: display 0s 0.1sのようなものを追加するよりも、この方法の唯一の問題は、iOSユーザーいったんドロップダウンを開くことで、彼/彼女はそれを再びクリックして閉じることはできません。それはリンクを引き起こすでしょう。しかし、ユーザーは別の場所をクリックして閉じる必要があります。