dropdown menu verdwijnt achter content

Ik heb een dropdown menu met 3 levels gemaakt en in vrijwel alle browsers gaat het goed, behalve (hoe kan het ook anders) in IE9 en lager. De submenu´s vallen achter de content. Ik heb vanalles geprobeerd met de position en de z-index in de css van het menu, maar niks werkt.
Opbouw menu:

<ul id="nav">
<li><a href="index.php?page=index">Home</a></li>
<li><a>Praktische informatie</a>
	<ul>
	<li><a class="sub">Tarieven<img class="pijl" src="img/arrow.gif" alt="pijl" border="0" /></a>
		<ul>
		<li><a href="index.php?page=tarieven">Tarieven consult</a></li>
		<li><a href="index.php?page=prijs_cursus">Tarieven cursussen</a></li>
		</ul>
	</li>
	<li><a href="index.php?page=data_locatie">Data &amp; locatie cursussen</a></li>
	<li><a href="index.php?page=aanmeldform">Aanmeldformulier</a></li>
	<li><a href="index.php?page=contact">Contact</a></li>
	<li><a href="index.php?page=links">Links</a></li>
	</ul>
	</li>
<li><a href="index.php?page=nieuws">Nieuws</a></li>
</ul>

menu.css:

#nav {
	background: #228b22;
	margin-top: 0.25px;
	padding: 0px 0px;
	border-radius: 5px;  
	list-style: none;
	position: relative;
	display: inline-table;
	width: 903px;
	z-index: 999;
	}
#nav li {
	float:left; 
	margin-right:0px;
	}
#nav li a {
	display:block; 
	padding: 8px 32px;
	color:#024f18; 
	text-decoration:none; 
	font-size:18px; 
	text-align: center;
	}

#nav li:hover a, #nav li a:hover {
	z-index:999; 
	position:relative;
	color:#ffffb9; 
	}
#nav li:hover {
	position:relative; 
	z-index:999;
	}
#nav li:hover > a {
	color:#ffffb9; 
	}
#nav :hover ul {
	position: absolute;
	z-index: 999;
	left:15px; 
	top:36px; 
	width:170px;
	}

/* keep the 'next' level invisible by placing it off screen. */
#nav ul, #nav :hover ul ul {
	position:absolute; 
	z-index: 999;
	left:-9999px; 
	top:-9999px; 
	width:0; 
	height:0; 
	margin:0; 
	padding:0; 
	list-style:none;
	}
#nav :hover ul :hover ul {
	left:180px; 
	top:5px; 
	white-space:nowrap; 
	width:150px; 
	z-index:999; 
	}
#nav :hover ul li {
	margin:-1px; 
	}
#nav :hover ul li a { 
	background: #ccff66;
	padding: 7px 0px;
	width: 180px; 
	color: #ffffb9;
	font-size: 16px;
	font-weight: normal; 
	}
#nav :hover ul li a.sub {
	background: #ccff66 url(arrow.gif);
	}
#nav :hover ul :hover {
	color:#024f18;
	}
#nav :hover ul :hover a.sub {
	color:#024f18;
	}
#nav :hover ul :hover ul li a {
	width:160px; 
	padding:7px 0px; 
	background: #228b22;
	color:#ffffb9;
	}
#nav :hover ul :hover ul :hover {
	color:#fff;
	background: #228b22;
	color:#024f18;
	}
.pijl {
	float: right;
	z-index:9;
	}

Iemand een idee hoe ik dit menu ook in IE9 en lager zichtbaar krijg?

Toevoeging op 04/02/2014 20:56:58:

Oké, na een dag vechten ben ik er uit. Voor wie ook zo´n dropdown 3-level menu wil: De truc zit in de eerste layout.
De background moet niet gedefinieerd worden in #nav, maar in #nav li a.
Het werkt niet in IE6, maar die is ondertussen wel echt afgeschreven, en in IE7 is het niet echt mooi, maar werkt wel. Voor de rest gaat ie perfect.