当子菜单出现在移动设备上时，在主导航中选择 link

Question

我正在创建的 Shopify 网站中有一个下拉菜单。

在桌面上，主 li 可点击 link，悬停时可打开子菜单项。

在移动设备上，主 li 只能打开子菜单 "drawer"，但不能单独选择 link。

如何使其在移动设备上可选择并打开抽屉？

li a {
  display: block;
  padding: 7px 10px !important;
  text-align: left !important;
}

<li class="site-nav--has-dropdown site-nav--active" aria-haspopup="true">
  <a href="/" class="site-nav__link">
                           Home
              <span class="icon icon-arrow-down" aria-hidden="true"></span>
             </a>
  <ul class="site-nav__dropdown">
    <div>
      <li>
        <a href="/pages/about-us" class="site-nav__link ">ABOUT</a>
      </li>

      <li>
        <a href="/pages/plans-and-pricing" class="site-nav__link ">PLANS &amp; PRICING</a>
      </li>

      <li>
        <a href="/pages/policies" class="site-nav__link ">POLICIES</a>
      </li>

      <li>
        <a href="/pages/posture-center" class="site-nav__link "> CENTER</a>
      </li>

      <li>
        <a href="/pages/back" class="site-nav__link "> BACK</a>
      </li>

      <li>
        <a href="/pages/faq" class="site-nav__link ">FAQ</a>
      </li>

      <li>
        <a href="/pages/our-teachers" class="site-nav__link ">OUR TEACHERS</a>
      </li>

    </div>
    <span class="arrow">&nbsp;</span>
  </ul>
</li>

Answer 1

将主 li link 作为子菜单中的第一项（除了主菜单中的 link 之外）。

在移动设备上显示。

在桌面设备上用 display: none 隐藏它。

当子菜单出现在移动设备上时，在主导航中选择 link

Selecting a link in the main navigation when sub-menu appears on mobile

html

css

shopify