CSS Dropdown Menu with CSS Transitions Z-Index not working - html

Question

I cannot get the z-index to show my drop down menu above my main hero image on the homepage.
The site to visit to see it is: auldlangsynegoods.com. I am hoping somebody can use some dev tools to look at the site and figure out why this drop down isn't appearing.
Here is the clean and simple 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>Shoes</li>
<li>Hats</li>
<li>Clothing</li>
</ul>
</li>
<li>Millinery</li>
<li class="hover">
<h3>Shoes and Accessories</h3>
<ul class="subMenu">
<li>Mens Shoes</li>
<li>Womens Shoes</li>
<li>Bags</li>
</ul>
</li>
<li class="hover">
<h3>Organic Skincare</h3>
<ul class="subMenu">
<li>Body</li>
<li>Face</li>
</ul>
</li>
<li>Garments</li>
</ul>
</nav>
And here is the simple clean CSS for the desktop view:
/*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

On the website you provided it looks to be that z-index isn't the issue, but rather that you need to remove overflow: hidden; from:
#mainNav {
overflow: hidden;
margin-bottom: 1.5em;
}
I was able to see the drop downs after removing that style using the chrome web dev tools.