html - Css z-index 子菜单

Question

我有一个下拉菜单，但我的问题是我的子菜单在出现时隐藏了他 parent 的元素。我该如何解决？我尝试使用 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>

Answer 1

通过这个改进你的代码我刚刚改进了 top: 3.45em;从顶部开始:2em；在 .menu-item:hover .sub-menu