Z-Index CSS-顶部导航与垂直导航重叠

Question

I have a website that i'm re-designing for a company i work for. The major difference with this website, and past projects is the website is hosted through a Web-to-Print Ecommerce company that handles most of the back-end stuff when it comes to purchases, and inventory control. They give me access to edit the HTML content, and the CSS. Sadly they do not give me any access to change the Javascript Navigation. I'm having issues with the JavaScript Navigation overlapping my pure CSS Vertical Menu below the slideshow. I know this has something to-do with the Z-index, but for the life of me i can not get it to work. Does anybody have any advice that i could use to add to the CSS to have it stop overlapping?

Here is the site so you can see what is happening - Website

#cssmenu {
    float:left;
    position:relative;

}

#cssmenu ul {
    font-size:14px; 

}

#cssmenu ul {
    font-size:16px;

}
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a {
  margin: 10px 0px 0px 0px;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;

}

#cssmenu {

}

#cssmenu > ul {
  width: 200px;
  background: #ffffff;

}

#cssmenu > ul > li > a {
    font-family: 'PT Sans Narrow', sans-serif;
  padding: 8px 15px;
  font-size: 16px;
  color: #666666;
  font-weight: 700;
  text-decoration: none;
  -webkit-transition: color .2s ease;
  -o-transition: color .2s ease;
  -ms-transition: color .2s ease;
  transition: color .2s ease;

}

#cssmenu > ul > li:hover > a,

#cssmenu > ul > li > a:hover {
  color: #222222;
 }
#cssmenu ul li.has-sub > a::after {
  position: absolute;
  right: 15px;
  display: block;
  width: 10px;
  height: 10px;
  content: "";
  border-radius: 2px;
}
#cssmenu > ul > li.has-sub > a::after {
  top: 14px;
  background: #666666;
}
#cssmenu > ul > li.has-sub:hover > a::after,
#cssmenu > ul > li.has-sub > a:hover::after {
  background: #222222;
}
#cssmenu ul ul li.has-sub > a::after {
  top: 13px;
  background: #ffffff;
}
#cssmenu ul ul li.has-sub:hover > a::after,
#cssmenu ul ul li.has-sub > a:hover::after {
  background: #dddddd;
}
#cssmenu ul li.has-sub > a::before {
  position: absolute;
  right: 15px;

  display: block;
  width: 0;
  height: 0;
  border: 3px solid transparent;
  content: "";
  z-index:2;
}
#cssmenu > ul > li.has-sub > a::before {
  top: 16px;
  border-left-color: #ffffff;
}
#cssmenu ul ul li.has-sub > a::before {
  top: 15px;
  border-left-color: #2e353b;
}
#cssmenu ul {
    z-index:2;
  -webkit-transform:;
  transform:;
  -webkit-perspective: 600px;
  -moz-perspective: 600px;
  perspective: 600px;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
#cssmenu ul li:hover > ul {
  left: 100%;
  opacity: 1;
  -webkit-transform: rotate3d(0, 0, 0, 0);
  transform: rotate3d(0, 0, 0, 0);
  z-index:2;
}
#cssmenu ul ul {
  position: absolute;
  top: 0;
  left: -9999px;
  width: 180px;
  background: #2e353b;
  opacity: 0;
  -moz-transition: opacity 0.2s ease, -moz-transform 0.2s ease;
  -webkit-transition: opacity 0.2s ease, -webkit-transform 0.2s ease;
  -ms-transition: opacity 0.2s ease, -ms-transform 0.2s ease;
  -o-transition: opacity 0.2s ease, -o-transform 0.2s ease;
  transition: opacity .2s ease, transform .2s ease;
  -webkit-transform: rotate3d(0, 1, 0, 45deg);
  -moz-transform: rotate3d(0, 1, 0, 45deg);
  transform: rotate3d(0, 1, 0, 45deg);
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  transform-origin: left center;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
   z-index:2;
}
#cssmenu ul li:hover > ul {
  left: 100%;
  opacity: 1;
  transform: rotate3d(0, 0, 0, 0);
  z-index:2;
  }
#cssmenu ul ul::after {
  position: absolute;
  left: -8px;
  top: 14px;
  z-index: 5;
  display: block;
  width: 0;
  height: 0;
  border: 4px solid transparent;
  border-right-color: #2e353b;
  content: "";
   z-index:2;
}
#cssmenu ul ul a {
  padding: 8px 15px;
  font-size: 12px;
  color: #ffffff;
  font-weight: 700;
  text-decoration: none;
  -webkit-transition: color .2s ease;
  -o-transition: color .2s ease;
  -ms-transition: color .2s ease;
  transition: color .2s ease;
   z-index:2;
}

#cssmenu ul ul li:hover > a,
#cssmenu ul ul li a:hover {
  color: #dddddd;
  z-index:2;
}  

Answer 1

You need to increase the z-index for the JavaScript navigation. You can do that with CSS.

.nav_child {
    z-index: 2;
}

Only tested in Chrome on Windows.