iphone.ipad.android.windows のタブレットでのドロップダウン、プルダウン、アコーディオンメニューを作るとクリックと同時にリンクされドドロップダウン、プルダウン、アコーディオンメニューが開きます。

リンクされちゃうのでドロップダウンメニューが使えません。これはタブレットにhoverの定義がないからです。

だからjqueryで作るのが普通ですがどうしてもcssだけで作りたかったので考えてみました。

それは<li>の要素の中の<a>要素を空の透明のタグ(<span>)などで隠す(透明要素がz-index上)方法です。<a>要素を使えなくして透明要素をhover 時に消える(display:noneよりwidth: 0%;のtransition: all 4s;)様にしてリンクさせずにhover を実行させればドロップダウンメニューが現れるという事です。

パソコンではhover の時透明要素は消えるのでいつもどうり動きますがタブレットでは1タップでhover の動作が実行され(透明要素は消え、ドロップダウンメニューは現れる)ので2タップしてリンクされます。

その為メニューボタンは全部2タップになりますがタブレット対応のドロップダウン、プルダウン、アコーディオンメニューはオーケーです。

また詳しく書きます。

windowsタブレットのInternet Explorer 以外すべてオーケーでした。