Css z-index sub menu

Question

I have a dropdown menu but my problem is that my sub-menu is hidding his parent's item when it appears. How can I fix it ? I tried with z-index but it doesn't work. I also tried to increase the margin-top of the sub-menu but the problem is that it becomes unreacheable.

 .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> 

Answer 1

improve your code by this i have just improved it by top: 3.45em; from top: 2em; in .menu-item:hover .sub-menu