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

你需要设计你的布局＆amp;以此为导航。

作为所有平台的基准，你应该选择点击然后显示下拉列表＆＃39;功能类型。然后，如果您真的想为某些平台（例如计算机）添加悬停功能，那么请进行检测并为它们运行一些额外的代码。请记住，一些计算机用户可能有触摸屏显示器！也许不是每个人都会有光标一直悬停。这就是为什么你真的没有看到在任何地方使用的悬停菜单。尝试找到执行此操作的任何主要网站或软件。

下拉菜单对手机用户无效

1 个答案: