如何修复在响应模式下突破的链接？

Question

在我的自定义shopify网站上，当主菜单处于响应模式时，链接变得非常简单且不合适，但只是在一个看似随机的短区域内，具体取决于浏览器。

以下是他们的看法：

以下是他们破坏时的样子：

根据所有响应代码，它们都设置完全相同。

以下是代码：

li a {
  display: block;
  padding: 7px 10px !important;
  text-align: left !important;
}
li ul li:first-child {
  display: none !important;
}
li ul li {
  font-size: 13px !important;
  clear: left !important;
  text-align: left !important;
  display: block !important;
}

<li class="site-nav--has-dropdown" aria-haspopup="true">
  <a href="/pages/studios" class="site-nav__link">
             STUDIOS
             <span class="icon icon-arrow-down" aria-hidden="true"></span>
         </a>
  <ul class="site-nav__dropdown">
    <div>
      <li>
        <a href="/pages/studios" class="site-nav__link ">STUDIOS</a>
      </li>
      <li>
        <a href="/pages/locations" class="site-nav__link ">LOCATIONS</a>
      </li>
      <li>
        <a href="/pages/class-schedule" class="site-nav__link ">UPCOMING CLASSES</a>
      </li>
      <li>
        <a href="https://yogavida-dev.myshopify.com/pages/studios#schedule" class="site-nav__link ">EVENTS</a>
      </li>
    </div>
    <span class="arrow">&nbsp;</span>
  </ul>
</li>