Css z-index子菜單

我有一個下拉菜單，但我的問題是，我的子菜單隱藏他父母的項目，當它出現。我該如何解決它？我嘗試使用z-index，但它不起作用。我也嘗試增加子菜單的頁邊距，但問題是它變得不可用。Css z-index子菜單

.menu { 
 
    list-style: none none; 
 
    margin: 0; 
 
    padding: 0; 
 
    line-height: 1; 
 
    font-size: 1.3vw; 
 
    z-index: 40; 
 
} 
 
.menu a { 
 
    display: block; 
 
    padding: .5em; 
 
    color: grey; 
 
    z-index: 52; 
 
    padding-top: 25px; 
 
    text-decoration: bold; 
 
    background-color: #3A4044; 
 
    text-decoration: none; 
 
    border-top: 6px solid #3A4044; 
 
} 
 
.menu a:focus, 
 
.menu a:hover { 
 
    color: #95A520; 
 
    background-color: #3A4044; 
 
    text-decoration: underline; 
 
    border-top: 6px solid #95A520; 
 
} 
 
.menu-item { 
 
    float: right; 
 
    /* Pour que les liens s’affichent horizontalement */ 
 
    position: relative; 
 
    /* Crée un contexte de positionnement pour les sous-listes */ 
 
} 
 
.menu-item:hover .sub-menu { 
 
    z-index: 20; 
 
    position: absolute; 
 
    /* Evite que la dimension du conteneur ne change quand la sous-liste est affichée */ 
 
    left: 0; 
 
    /* FIX IE7 : pour que le sous-menu s’aligne avec son conteneur */ 
 
    top: 2em; 
 
    /* FIX IE7 : pour que le sous-menu s’aligne avec son conteneur */ 
 
    white-space: nowrap; 
 
    /* Pour que le texte ne revienne pas à la ligne */ 
 
    background-color: #3A4044; 
 
    margin-top: -2px; 
 
    /* Pour que le sous-menu recouvre son parent, facilitant le passage de la souris de l’un à l’autre */ 
 
    text-align: center; 
 
} 
 
.sub-menu { 
 
    z-index: 20; 
 
    list-style: none; 
 
    text-align: center; 
 
    position: absolute; 
 
    /* Evite que la dimension du conteneur ne change quand la sous-liste est affichée */ 
 
    left: -1500px; 
 
    /* FIX IE7 : pour que le sous-menu s’aligne avec son conteneur */ 
 
    top: 4em; 
 
    /* FIX IE7 : pour que le sous-menu s’aligne avec son conteneur */ 
 
    white-space: nowrap; 
 
    /* Pour que le texte ne revienne pas à la ligne */ 
 
    background-color: #3A4044; 
 
    margin-top: -2px; 
 
    /* Pour que le sous-menu recouvre son parent, facilitant le passage de la souris de l’un à l’autre */ 
 
} 
 
.sub-menu a { 
 
    border: none; 
 
    z-index: 20; 
 
} 
 
.sub-menu ul { 
 
    margin-top: 15px; 
 
} 
 
.menu-item-has-children { 
 
    z-index: 999; 
 
    position: absolute; 
 
} 
 
.sub-menu a:hover { 
 
    border: none; 
 
} 
 
#menu { 
 
    background-color: #3A4044; 
 
    position: absolute; 
 
    display: inline; 
 
    top: 0px; 
 
    z-index: 1; 
 
    width: 100%; 
 
    Height: 12%; 
 
}

<div id="menu"> 
 
    <div class="menu-menu-container"> 
 
    <ul id="menu-menu" class="menu"> 
 
     <li id="menu-item-41" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-41"><a href="http://heriaucouverture.fr/presentation/">Présentation</a> 
 
     </li> 
 
     <li id="menu-item-44" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-44"><a href="http://heriaucouverture.fr/nos-realisations/">Nos réalisations</a> 
 
     <ul class="sub-menu"> 
 
      <li id="menu-item-85" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-85"><a href="http://heriaucouverture.fr/nos-realisations/eglises/">Eglises</a> 
 
      </li> 
 
      <li id="menu-item-84" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-84"><a href="http://heriaucouverture.fr/nos-realisations/chateaux/">Châteaux</a> 
 
      </li> 
 
      <li id="menu-item-83" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-83"><a href="http://heriaucouverture.fr/nos-realisations/manoirs/">Manoirs</a> 
 
      </li> 
 
      <li id="menu-item-82" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-82"><a href="http://heriaucouverture.fr/nos-realisations/habitations/">Habitations</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
     <li id="menu-item-47" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-47"><a href="http://heriaucouverture.fr/savoir-faire/">Savoir-faire</a> 
 
     </li> 
 
     <li id="menu-item-50" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-50"><a href="http://heriaucouverture.fr/ornementation/">Ornementation</a> 
 
     </li> 
 
     <li id="menu-item-53" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-53"><a href="http://heriaucouverture.fr/news/">News</a> 
 
     </li> 
 
     <li id="menu-item-56" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-56"><a href="http://heriaucouverture.fr/contact/">Contact</a> 
 
     </li> 
 
     <li id="menu-item-59" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-59"><a href="http://heriaucouverture.fr/liens-utiles/">Liens utiles</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div>

來源

2016-08-13 Matthieu Salor