#nav, #nav ul {
padding: 0 0 0 0;
margin: 0;
list-style: none;
}

#nav li {
float: left;
width: 100px;
}

#nav ul {
position: absolute;
width: 101px;
left: -1000px;
}

#nav li:hover ul, #nav li.ie_does_hover ul {
left: auto;
}

#nav a {
display: block;
margin: 0 0 0 0;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
}

ul a{
font-weight: bold;
color: #000;
cursor: default;
}

ul ul a:link, ul ul a:visited{
font-weight: normal;
color: #000;
cursor: pointer;
}

ul ul a:hover, ul ul a:active{
font-weight: normal;
color: #ccc;
cursor: pointer;
}

ul ul li.rood{
background-color: #e51837;
border: 0px groove #000; 
border-top: 0;
padding-bottom: 2px;
padding-top: 2px;
margin-top:-3px;
}

ul ul li.geel{
background-color: #fce50b;
border: 0px groove #000; 
border-top: 0;
padding-bottom: 2px;
padding-top: 2px;
margin-top:-3px;
}

ul ul li.groen{
background-color: #0c8d6e;
border: 0px groove #000; 
border-top: 0;
padding-bottom: 2px;
padding-top: 2px;
margin-top:-3px;
}

/* IE only hack \*/
* html ul li, * html ul ul li{
border-bottom: none;
}

* html ul ul li{
border-top: 0;
}


/******/ HTML bestand **/

<ul id="nav">
		  <li><a href="#">Link 1</a></li>
		  <li><a href="#">Link 2</a>
		  <ul>
			<li><a href="#">Sublink 1</a></li>
			<li><a href="#">Sublink 2</a></li>
			</ul>
		</li>
		<li><a href="#">Link 3</a>
		<ul>
		<li><a href="#">Sublink 3</a></li>
		<li><a href="#">Sublink 4</a></li>
		</ul>
		</li>
		<li><a href="#">Link 4</a>
		<ul>
		<li><a href="#">Sublink 5</a></li>
		<li><a href="#">Sublink 6</a></li>
		</ul>
		</li>
		</ul>