html - 下拉菜单不适用于手机用户

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，实际上并不支持悬停。

您需要在设计布局和导航时考虑到这一点。

作为所有平台的基准，您可能应该使用“点击然后显示下拉”类型的功能。然后，如果您真的想为某些平台(例如计算机)添加悬停功能，则进行检测并为它们运行一些额外的代码。请记住，一些计算机用户可能有触摸屏显示器!也许不是每个人都会有一个光标一直悬停在上面。这就是为什么您真的看不到到处都在使用悬停菜单的原因。尝试找到执行此操作的任何主要网站或软件。