магазин выпадающего меню linklists overlaying друг друга

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); 
}