タッチデバイスのためのホバー

Question

私は以下のよく知られているCSSコードを使用してウェブページにドロップダウンメニューを表示しています。

div#menu ul ul { 
    display: none; 
} 
div#menu ul li:hover ul { 
    display: block; 
} 

このメニューは、別のu-listを含むu-listです。マウスがこのメニューのリスト項目の上に移動すると、2番目のu-listが表示されます。リスト項目はリンクなし、テキストのみです。

これは最新のブラウザで機能します。私はIE6のjavascriptの偽造があります。

ただし、タッチデバイスでは機能しません。

IPadでは、リスト項目を押しても何も起こりません。これはおそらく、リスト項目がアンカーではないためです。あるいは、私はそれを修正するためにクリックイベントが必要です。

Androidブラウザでは、リスト項目を長く押すとサブメニューが開きます。ただし、サブメニューのリンクを選択することはできません。

誰でも手伝ってもらえますか？

は場合は、あなたが詳細を必要とする（と時間を持っている）、

http://www.rene-grothmann.de/musica-aliter-test/

感謝を見てください。

Answer 1

は、このようなあなたのリストの要素を入れ子にしてみてください。

<ul> 
    <li><a href="#">LINK</a> 
     <ul> 
     <li><a href="#">LINK</a></li> 
     <li><a href="#">LINK</a></li> 
     <li><a href="#">LINK</a></li> 
     <li><a href="#">LINK</a></li> 
     </ul> 
    </li> 
    <li> 
    more links here, if you wish. 
    </li> 
</ul> 

ホバー状態に問題があってはなりません。どのデバイスでも正常に動作するはずです。さて、それが私のためにどのように機能するのでしょうか？

Answer 2

は、ホバー状態をサポートしていないため、タッチデバイスで応答するためにdiv#menu ul li:active ulになる必要があります。

Answer 3

あなたのリストアイテムはリンクであるべきだと思います。少なくとも試してみるべきです。