帶有CSS過渡Z索引的CSS下拉菜單不起作用

Question

我無法通過z-index在首頁的主要英雄圖片上方顯示下拉菜單。

要查看它的站點是：auldlangsynegoods.com。 我希望有人可以使用一些開發工具來查看站點，並弄清楚為什么沒有出現此下拉列表。

這是干凈簡單的html：

<nav id="mainNav" role="navigation" class="cf">
    <h2>Site navigation</h2>
    <ul class="topMenu">
      <li class="hover">
        <h3>Infant and Baby</h3>
        <ul class="subMenu">
          <li><a href="shoes_and_accessories.html" title="Infant and Baby Shoes">Shoes</a></li>
          <li><a href="shoes_and_accessories.html" title="Infant and Baby Hats">Hats</a></li>
          <li><a href="shoes_and_accessories.html" title="Infant and Baby Clothing">Clothing</a></li>
        </ul>
      </li>
      <li><a href="millinery.html" title="Millinery Also Known as Hats">Millinery</a></li>
      <li class="hover">
        <h3>Shoes and Accessories</h3>
        <ul class="subMenu">
          <li><a href="shoes_and_accessories.html" title="Shoes and Accessories - Mens Shoes">Mens Shoes</a></li>
          <li><a href="shoes_and_accessories.html" title="Shoes and Accessories - Womens Shoes">Womens Shoes</a></li>
          <li><a href="shoes_and_accessories.html" title="Shoes and Accessories - Bags">Bags</a></li>
        </ul>
      </li>
      <li class="hover">
        <h3>Organic Skincare</h3>
        <ul class="subMenu">
          <li><a href="Organic_Skincare.html" title="Organic Skincare - Body">Body</a></li>
          <li><a href="shoes_and_accessories.html" title="Organic Skincare - Face">Face</a></li>
        </ul>
      </li>
      <li><a href="Garments.html" title="Garments">Garments</a></li>
    </ul>
  </nav>

這是桌面視圖的簡單干凈的CSS：

/*nav styles*/
#mainNav {
    padding-left:3.9%;
    margin-bottom: 1.5em;
}

#mainNav li {
    float: left;
}

#mainNav a {

    display: block;
    color: #383420;
    border: none;
}

#mainNav a:hover {
    color: #484329;
}

#mainNav a.current {
    color: #A6A6A6;
    cursor: default;
}
/*nav styles*/
#mainNav {
    padding-left: 3.9%;
    margin-bottom:1em;
}
#mainNav li {
    margin-right: 3%;
    position: relative;
}
#mainNav a, #mainNav h3 {
    font-size: 1.2em;
    text-align: left;
    padding: 0 1em;
}
/*dropdown menu styles*/
#mainNav ul.subMenu {
    float: none;
    width: auto;
    height: auto;
    position: absolute;
    top: 0;
    padding-top: 2.8em;
    left: -8000em;
    max-height: 0;
    -moz-transition:max-height 0.5s ease;
    -webkit-transition:max-height 0.5s ease;
    -o-transition:max-height 0.5s ease;
    transition:max-height 0.5s ease;
    overflow: hidden;
    z-index: 5;
}
#mainNav ul.subMenu li {
    float: none;
    margin: 0;
    background: rgb(76, 67, 65);
    background: rgba(76, 67, 65, .9);
}
#mainNav li:hover ul {
    left: 0;
    max-height: 20em;
}
#mainNav ul.subMenu li a {
    border-bottom: 1px solid white;
    padding: .2em 1em;
    white-space: nowrap;
    color: white;
    text-align: left;
    font-size: 1.1em;
}
#mainNav ul.subMenu li:last-child a {
    border-bottom: none;
}
#mainNav ul.subMenu li a:hover {
    background: rgb(123, 121, 143);
}

Answer 1

在您提供的網站上，看起來z-index不是問題，而是您需要消除overflow: hidden; 從：

#mainNav {
    overflow: hidden;
    margin-bottom: 1.5em;
}

使用chrome web開發工具刪除該樣式后，我可以看到下拉菜單。