shopify下拉菜单链接列表相互叠加

Question

我的Shopify下拉菜单有一个奇怪的问题。

在移动网站上或当我缩小窗口时，女性和男性的链接列表会相互叠加。请看图片，关于如何解决这个问题的任何线索？

我的商店是triplepeace.myshopify.com pss：muitwe

.mobile-mega-nav {
  display: none;

  @include breakpoint(m) {
    display: block;
  }
}

.navigation.mobile {
  position: absolute;
  top: 0;
  bottom: 0;
  background: #043342 none repeat scroll 0% 0%;
  z-index: 3000;
  max-width: 450px;
  width: 100%;
  overflow: hidden;
  @include transform(translateX(-450px));
  @include transition(all 0.2s $ease-out-quad);

  @include breakpoint(xs) {
    @include transform(translateX(-300px));
    max-width: 300px;
  }

  &.visible {
    @include breakpoint(m) {
      @include transform(translateX(0px));
    }
  }

  .branding {
    position: relative;
    font-size: 0;

    img { height: auto; }
  }

  .mobile-nav-logo {
    display: inline-block;
    max-width: 200px;
  }

  .sticky-logo { display: none; }

  .logo-regular {
    display: block;
  }

  .has-retina {
    @include retina {
      .logo-regular {
        display: none;
      }

      .logo-retina {
        display: block;
      }
    }
  }

  ul {
    position: relative;
    padding: 0 25px;
    @include transition(all 0.2s $ease-out-quad);

    &.out-of-view {
      @include transform(translateX(-100%));
    }
  }

  ul ul {
    position: absolute;
    top: 0;
    left: 100%;
    width: 100%;

    &.in-view {
      display: block;
    }
  }

  .enter-linklist {
    @extend %icon;
    display: inline-block;
    float: right;
    margin-top: -4px;
    border: 1px solid #fff;
    border-radius: 0;
    padding: 10px 12px;
    color: #fff;
  }

  .back {
    position: relative;
    display: none;
    padding: 28px 20px;
    border-bottom: 1px solid $border-color;
    cursor: pointer;
    font-family: $navigation-font;
    font-weight: $navigation-weight;
    color: #fff;
    text-transform: uppercase;

    {% if settings.navigation-font-small-caps %}
      @extend %small-caps;
    {% endif %}

    @include breakpoint(m) {
      display: block;
    }

    .icon {
      @extend %icon;
      position: absolute;
      top: 50%;
      left: 0;
      padding: 0;
      border: 0;
      @include transform(translateY(-50%));
    }
  }

  .first a {
  //  border-top: 1px solid $border-color;
  }

  a {
    display: block;
    padding: 28px 20px;

    @include breakpoint(m){ text-transform:uppercase; }
    @include breakpoint(s){ text-transform:uppercase; }
    @include breakpoint(xs){ text-transform:uppercase; }
  }

  .cart-count {
    display: none;
  }

  .mobile-link {
    display: block;
    text-transform:uppercase;
  }

  .navigation-toggle { padding-top: 0; }

  .search-form {
    position: relative;
    padding: 20px;
    margin: 0;

    input[type="submit"] {
      right: 20px;
    }
  }

  .search-input {
    max-width: 100%;
    width: 100%;
  }
}

<!-- Menu links -->    
      
      
      <li class="has-mega-nav first" data-mega-nav="true">
      <a data-linklist-trigger="shop" href="/collections/all">Shop <span class="enter-linklist"></span></a>

        <ul class="mobile-mega-nav" data-linklist="shop">
          <li>
            <span class="back"><span class="icon"></span> Back to previous</span>
          </li>

          <li class="has-dropdown">
            <a data-linklist-trigger="apparel" href="">MEN<span class="enter-linklist"></span></a>
            <ul data-linklist="apparel">
              <li>
                <span class="back"><span class="icon"></span> Back to previous</span>
              </li>
              
              <li><a href="/collections/men-shirts">Shirts</a></li>
              
              <li><a href="/collections/men-color-changing">Color changing tees</a></li>
              
              <li><a href="/collections/men-hoodies">Hoodies</a></li>
              
             <!-- <li><a href="/pages/shop-our-instagram">Shop Our Instagram</a></li> -->
              
              <li><a href="/pages/shop-by-design">Shop By Design</a></li>
              
              <!--<li data-image-src="" data-image-alt=""><a href="/collections/new-arrivals">New Arrivals</a></li>-->
              
              <li><a href="/collections/Mens">Shop All</a></li>
              
              
              
              
            </ul>
          </li>
          
          <li class="has-dropdown">
            <a data-linklist-trigger="apparel" href="">WOMEN<span class="enter-linklist"></span></a>
            <ul data-linklist="apparel">
              <li>
                <span class="back"><span class="icon"></span> Back to previous</span>
              </li>
              
              <li><a href="/collections/women-boyfriend-tee">boyfriend Tee</a></li>
              
              <li><a href="/collections/Girls">V-neck</a></li>
              
              <li><a href="/collections/scoop-neck">Scoop neck</a></li>
              
             <!-- <li><a href="/pages/shop-our-instagram">Shop Our Instagram</a></li> -->
              
              <li><a href="/collections/women-tanks">Tank tops</a></li> 
              
              <li><a href="/collections/women-hoodies">Hoodies</a></li>
              
              <!--<li data-image-src="" data-image-alt=""><a href="/collections/new-arrivals">New Arrivals</a></li>-->
              
              <li><a href="/collections/women">Shop All</a></li>
              
              
              
              
            </ul>
          </li>

Answer 1

尝试在CSS样式中添加此内容

.in-view .active {
   background: rgb(4, 51, 66);
}