z-index is not working for navigation bar - css

Question

I have a drop-down CSS menu. The drop down <div> should start above the page, behind my fixed navigation bar and when a navigation button is "moused over". It uses a CSS transition to move the submenu down the page, making it visible.
The problem is.. it keeps rendering the submenu above my navigation bar (in terms of z-index). I need it to render behind the navigation bar.
Click here to see the webpage
(The page is intentionally aligned to the left for now - ignore this)
Here is how the HTML is layed out:
<div id="nav">
<ul>
<li>Title 1</li> <!-- has no submenu -->
<li>Title 2
<div>
<!-- Submenu Content -->
</div>
</li>
</ul>
</div>
and here is my CSS:
#nav {
position:absolute;
width:<?php echo ($navbutwidth*$numititles)+($numititles-1); ?>px;
background-color:<?php echo $colnavbg; ?>;
z-index:5 !important;
}
#nav ul {
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
width:<?php echo $navbarwidth; ?>px;
z-index:3 !important;
}
#nav ul li {
float:left;
}
#nav ul li > a {
width:<?php echo ($navbutwidth-16); ?>px;
height:<?php echo $navbutheight; ?>px;
line-height:<?php echo $navbutheight; ?>px;
display:block;
text-decoration:none;
border-left:1px Solid <?php echo $colnavbutborder; ?>;
padding-left:15px;
background-color:<?php echo $colnavbutbg; ?>;
color:<?php echo $colnavbuttxt; ?>;
border-radius:10px 10px 0px 0px;
}
#nav ul li > a:hover {
background-color:<?php echo $colnavbutbghov; ?>;
color:<?php echo $colnavbuttxthov; ?>;
}
#nav ul li > div {
position:absolute;
top:-<?php echo $navsubbutheight-$navbutheight; ?>px;
left:0px;
width:<?php echo $navsubbutwidth; ?>px;
height:<?php echo $navsubbutheight-1; ?>px;
text-align:left;
display:block;
padding:0;
background-color:<?php echo $colsubnavbutbg; ?>;
border-top:1px Solid #FFF;
border-bottom:1px Solid #FFF;
z-index:1 !important;
-webkit-transition:all 0.2s ease-in-out;
-ms-transition:all 0.2s ease-in-out;
transition:all 0.2s ease-in-out;
}
#nav ul li:hover > div {
top:<?php echo $navbutheight; ?>px;
display:block;
}
#nav ul li > div:hover {
background-color:<?php echo $colnavbutbghov; ?>;
}

Answer 1

Add position: relative; z-index: 1000; to .a1.
Having overflow: hidden on your ul will prevent anything outside that ul from showing up.