CSS下拉菜單與CSS轉換Z索引不起作用

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 dev工具刪除該樣式後，我可以看到下拉菜單。