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

Question

我有一个网站，我正在为我工​​作的公司重新设计。这个网站和过去的项目的主要区别在于该网站是通过一个Web-to-Print电子商务公司托管的，该公司处理大部分后端事务，涉及购买和库存控制。他们让我有权编辑HTML内容和CSS。可悲的是，他们没有给我任何改变Javascript导航的权限。我在JavaScript导航中存在与幻灯片下方的纯CSS垂直菜单重叠的问题。我知道这与Z-index有关，但是对于我来说，我无法实现它。有人有任何建议，我可以用来添加到CSS，让它停止重叠？

这里是网站，所以你可以看到发生了什么 - 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

你需要增加的z-index为JavaScript的导航。你可以用CSS做到这一点。

.nav_child { 
    z-index: 2; 
} 

只在Windows上的Chrome上进行测试。