Help - Child Menu z-Index?

I've been messing around with this for days. My child menu, or sub menu item, always gets trapped under a module container's header and I cannot figure out where to put the z-index attribute. Any help would be appreciated. I've attached a screenshot and below is my css:

/*  NavMenu styles start here */

/**/


#navHContainer {
    clear:both;
    position:absolute;
       vertical-align:bottom;
    display:block; 
}
#nav a {
    font-size:.99em;
    font-family:"Trebuchet MS";
    display:block;
    text-decoration:none;
    text-align:center;
    font-weight:bold;
    /*width:8.5em;*/
    padding :6px 8px 4px 8px;
    color:#000;
    border:1px solid #444;
    background-color:#000000;
    color:#FFFFFF;
}
#nav li li a {
    width:12em;
    font-size:.99em;
    font-weight:normal;
    text-align:left;
}

#nav ul {
    padding:0;
    margin:0 0 0 0;
    list-style:none;
    float:left;
    width:auto;
    background-color:black;
}

#nav li {
  position: relative;
  float:left;
  line-height : 1.25em;
 /* width: 9em; */
  list-style: none;
}

#nav li ul {
    /* second-level lists */
    position : absolute;
    left: -999em;
    width: 13em;
    background-color: #444;
    /*border:1px solid #CC3300;*/
    margin-top: 7px;
}

#nav li ul li ul { /* third-level lists */
    position : absolute;
    left: -999em;
    width:13em;
    background-color:#6CC1F7;
    margin-top:0px;
}


#nav a {
    font-size:.99em;
    font-family:Verdana;
    display:block;
    text-decoration:none;
    text-align:center;
    font-weight:bold;
    /*width:8.5em;*/
    padding :6px 8px 4px 8px;
    color:#000;
    border:1px solid #444;
    background-color:#000000;
    color:#FFFFFF;
}
#nav li li a {
    width:12em;
    font-size:.99em;
    font-weight:normal;
    text-align:left;
}

#nav li a:hover {
    background-color: #333333;
  /*border:1px solid #CC3300;*/
}
#nav li a.SelectedTab {
   
}
#nav .DisabledTab {
    color:#ccc;
}
/* no need to change these hover classes
unless you need more than 4 levels */
#nav li:hover ul ul,
#nav li:hover ul ul ul,
#nav li:hover ul ul ul ul,
#nav li.iehover ul ul,
#nav li.iehover ul ul ul,
#nav li.iehover ul ul ul ul{
  left: -999em;
}

#nav li:hover ul,
#nav li.iehover ul {
    top: 1.6em;
    left:0;
}
#nav li li:hover ul,
#nav li li li:hover ul,
#nav li li.iehover ul, 
#nav li li li.iehover ul {
    top: 0;
    left:12.8em;
}

Nevermind. I fixed it my modifying the container title to have a z-index of 0 and put a z-index of 1000 on the #nav ul class.

BTW feel free to use this menu as an example of a simple horizontal menu with vertical sub-menus. Here is the ascx code:

< div id="navHContainer" >
                 < Snapsis:NavMenu id="nav" DisplayIcon="True" Level="0-99" Type="Hover" ExcludeTabs="Admin,Host" runat="server"  / >
             < / div >