Hello everybody

I have made a pure css dropdown menu on my webpage. It is working perfectly, but now I wanna add an extra level to the menu. I tried many different things, but I ended up with a not working extra menu level, or with a menu that wasn't looking the way it was supposed to be. Does anybody know what I need to change to my code to get it working?

HTML Code:
<ul id="nav">
	<li><a href="index.php">Home</a></li>
    <li><a href="#">De Spetter</a>
	<ul>
	<li><a href="overzicht_de_spetter.php">Wat biedt de Spetter?</a></li>
	<li><a href="openingstijden.php">Openingstijden</a></li>   
    <li><a href="prijzen.php">Prijzen</a>
	<ul>
	<li><a href="*.php">*</a></li>
	<li><a href="*formulier.php">*</a></li>
	</ul>
	</li>
	<li><a href="bestuur.php">Het bestuur</a></li>
	<li><a href="vrijwilligers.php">Vrijwilligers</a></li>
  	</ul>
	</li>
    <li><a href="#">Activiteiten</a>
	<ul>
	<li><a href="stuivertjes_duiken.php">Stuivertjes duiken</a></li>
	<li><a href="aqua_joggen.php">Aqua-joggen</a></li>
    <li><a href="zwem_4_daagse.php">Zwem-4-daagse</a></li>
    <li><a href="zwemlessen.php">Zwemlessen</a></li>
	<li><a href="duiken.php">Duiken</a></li>
    </ul>
	</li>
    <li><a href="#">Sponsoren</a>
	<ul>    
<li><a href="donateurs.php">Donateurs</a></li>
	<li><a href="sponsor_worden.php">Sponsor worden</a></li>
    <li><a href="dorpsveiling.php">Dorpsveiling</a></li>
	<li><a href="sponsorthermometer.php">Sponsorthermometer </a></li>

	</ul>
	</li>    <li><a href="#">Contact</a>
	<ul>
	<li><a href="adres.php">Adres</a></li>
	<li><a href="contactformulier.php">Contactformulier</a></li>
	</ul>
	</li>
    </ul>
The extra level is the part where is says:
HTML Code:
	<ul>
	<li><a href="*.php">*</a></li>
	<li><a href="*formulier.php">*</a></li>
	</ul>
CSS for dropdown menu:
Code:
#nav, #nav ul {
padding: 3px 0 0 0;
margin: 0;
list-style: none;
}
 
#nav li {
float: left;
width: 145px;
}
 
#nav ul {
position: absolute;
width: 145px;
left: -1000px;
}
 
#nav li:hover ul, #nav li.ie_does_hover ul {
left: auto;
background-position: 0 0;
background-color:#00ccff;
}
 
#nav a {
display: block;
margin: 1px 4px 2px 4px;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height:30px;
}
 
ul a{
font-weight: bold;
color: #FFF;
cursor: default;
}
 
ul ul a:link, ul ul a:visited{
font-weight: normal;
color: #FFF;
cursor: pointer;
}
 
ul ul a:hover, ul ul a:active{
font-weight: normal;
color: #FFF;
cursor: pointer;
background-color:#F00;
}
 
ul li{
background-color: #00ccff;
text-align:center;

}
ul a:hover{
background-color: #F00;

}
ul ul li{
background-color: rgb(21,135,235);
border-top: 1px solid #00ccff;
border-left: 0;
}

#nav ul ul {
	position: absolute; 
	left: 100%; 
	top:0;
}