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上進行測試。