ドロップダウンメニューは電話ユーザーでは機能しません

Question

ドロップダウンメニューは電話ではなくコンピュータでのみ機能します。なぜこれが起こるのですか？

私はmobileHideクラスを作成してドロップダウンを非表示にしてから、ドロップダウンの内容を手動で追加して、ドロップダウンの内部にはいなくなっていましたが、奇妙に見えました。

li a, .dropbtn { 
 
    display: inline-block; 
 
    color: black; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
} 
 

 
li a:hover, .dropdown:hover .dropbtn { 
 
    background-color: red; 
 
} 
 

 
li.dropdown { 
 
    display: inline-block; 
 
} 
 

 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #f9f9f9; 
 
    min-width: 160px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
 
    z-index: 1; 
 
} 
 

 
.dropdown-content a { 
 
    color: black; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
    text-align: left; 
 
} 
 

 
.dropdown-content a:hover { 
 
    background-color: #f1f1f1 
 
} 
 

 
.dropdown:hover .dropdown-content { 
 
    display: block; 
 
    color: #1789e8: 
 
}

<li class="dropdown"> 
 
    <a href="javascript:void(0)" class="nav-top"> 
 
    <i class="fa fa-ellipsis-v fa-lg" aria-hidden="true"></i><br> 
 
    <span class="meny-text">More <span class="caret"></span></span> 
 
    </a> 
 
    <div class="dropdown-content"> 
 
    <a href="https://rocketprices.net/certified-ps4">Certified - PS4</a> 
 
    <a href="#" style="cursor:not-allowed;" >Certified - PC</a> 
 
    <a href="/faq">FAQ</a> 
 
    <a href="#" data-toggle="modal" data-target="#modal-staff">Staff</a> 
 
    </div> 
 
</li>

Answer 1

ポップダウンのみホバーアクションを見せているあなたは、しかし、モバイルデバイス上のHTML/CSSのために、ホバーは本当にサポートされていません。

これを念頭に置いてレイアウト&のレイアウトを設計する必要があります。

すべてのプラットフォームのベースラインとして、「クリックしてから表示する」ドロップダウンタイプの機能が必要です。特定のプラットフォーム（コンピュータなど）にホバー機能を追加する場合は、検出を行い、そのためのコードをいくつか追加して実行してください。一部のコンピュータユーザーにはタッチスクリーンモニターが搭載されている可能性があります。多分、誰もがいつもカーソルを置くわけではないでしょう。このため、どこでも使用されているホバーメニューは実際には表示されません。これを行う主要なウェブサイトやソフトウェアを探してみてください。