shopify dropdown menu linklists overlaying each other - css

Question

I'm having a weird issue with my Shopify dropdown menu.
On mobile sites or when i shrink a window the linklists for women and men overlay each other. please see picture, any clue on how to fix this?
My store is 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>Shirts</li>
<li>Color changing tees</li>
<li>Hoodies</li>
<!-- <li>Shop Our Instagram</li> -->
<li>Shop By Design</li>
<!--<li data-image-src="" data-image-alt="">New Arrivals</li>-->
<li>Shop All</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>boyfriend Tee</li>
<li>V-neck</li>
<li>Scoop neck</li>
<!-- <li>Shop Our Instagram</li> -->
<li>Tank tops</li>
<li>Hoodies</li>
<!--<li data-image-src="" data-image-alt="">New Arrivals</li>-->
<li>Shop All</li>
</ul>
</li>

Answer 1

Try adding this in your CSS styles
.in-view .active {
background: rgb(4, 51, 66);
}