geavanceerd dropdown menu (Opgelost)

<ul class="header_nav">
	<li><a href="/">Home</a></li>
	<li><a href="howitworks.php">Hoe werkt het?</a></li>
	<li id="dropdown" onmouseover="document.getElementById('cssm1').id='cssm1_vis'" onmouseout="document.getElementById('cssm1_vis').id='cssm1'"><a href="articles.php">Schoolwerk</a>
		<div id="cssm1">
			<ul class="header_nav_2">
				<li class="header_nav_2"><a href="#">Boekverslagen</a>
					<ul class="header_nav_3">
						<li class="header_nav_3"><a href="#">Nederlands</a></li>
						<li class="header_nav_3"><a href="#">Engels</a></li>
					</ul>
				</li>
				<li class="header_nav_2"><a href="#">Samenvattingen</a>
					<ul class="header_nav_3">
						<li class="header_nav_3"><a href="#">Wiskunde</a></li>
						<li class="header_nav_3"><a href="#">Natuurkunde</a></li>
					</ul>
				</li>
			</ul>            
		</div>
	</li>
</ul>

<ul class="header_nav">
	<li><a href="/">Home</a></li>
	<li><a href="howitworks.php">Hoe werkt het?</a></li>
	<li id="dropdown" onmouseover="document.getElementById('cssm1').id='cssm1_vis'" onmouseout="document.getElementById('cssm1_vis').id='cssm1'"><a href="articles.php">Schoolwerk</a>
		<div id="cssm1">
			<ul class="header_nav_2">
				<li class="header_nav_2"><a href="#">Boekverslagen</a>
					<ul class="header_nav_3">
						<li class="header_nav_3"><a href="#">Nederlands</a></li>
						<li class="header_nav_3"><a href="#">Engels</a></li>
					</ul>
				</li>
				<li class="header_nav_2"><a href="#">Samenvattingen</a>
					<ul class="header_nav_3">
						<li class="header_nav_3"><a href="#">Wiskunde</a></li>
						<li class="header_nav_3"><a href="#">Natuurkunde</a></li>
					</ul>
				</li>
			</ul>            
		</div>
	</li>
</ul>

ul.header_nav {
	list-style: none; 
	display: inline;
	padding: 0 0 -2px 0;
	margin: 0 0 -2px 50px;
}
ul.header_nav li {	
	display: inline-block;
	padding: 0 0 -2px 0;
	margin: 0 0 -2px 0;
}
ul.header_nav li a, ul.header_nav li a:visited { 
	border-radius: 7px 7px 0 0;
	padding: 5px 15px;
	display: inline-block; 
	text-decoration: none;
	background: #333;
	color: #fff;
	font-style: normal;
}
ul.header_nav li a:hover, ul.header_nav li a:active, ul.header_nav li a:focus { 
	background: #555;
}
#cssm1 *, #cssm1_vis *  { 
	padding:0; 
	margin: 0; 
}

#cssm1, #cssm1_vis {
	z-index: 99;  
	position: absolute; 
	/*	float: left;  */
	margin:0; 
	line-height: 30px; 
}

#cssm1 a, #cssm1_vis a { 
	display: block; 
	border-bottom: 1px solid #000; 
	background: #abc; 
	text-decoration: none; 
	padding: 3px 10px; 
}
#cssm1_vis a:hover { 
	background: #789; 
}


#cssm1_vis ul li, #cssm1_vis ul li ul li  { 
	width: 120px; 
}

#cssm1_vis ul, #cssm1_vis ul li ul, #cssm1_vis ul li:hover ul li ul{ 
 /*	display:none;*/
	list-style-type:none; 
	width: 120px;
}

#cssm1_vis ul, #cssm1_vis ul li:hover ul, #cssm1_vis ul li:hover ul li:hover ul { 
	display:block; 
}

#cssm1_vis ul li:hover ul, #cssm1_vis ul li:hover ul li:hover ul { 
	position: relative;
}

#cssm1 ul li ul, #cssm1 ul li ul li ul { 
	clear: left; 
	margin-top: -37px;
}
#cssm1 ul { 
	display:block; 
} 

#ccsm1_vis, #ccsm1_vis {
	display: block;
	background-position: 0 0;
}

#ccsm1 ul.header_nav_2 {
	position: relative;
	width: 120px;
	display: none;
}
#ccsm1 ul.header_nav_2 li ul {
	position: relative;
	width: 120px;
	display: none;
}
#ccsm1_vis ul.header_nav_2 li:hover ul, #ccsm1_vis ul.header_nav_2 li.ie_does_hover ul {
/*	float: left;*/
	display: inline;
	background-position: 0 0;
}

#cssm1 ul li ul, #cssm1 ul {
	display: none;
}
#cssm1_vis ul.header_nav_2, #cssm1_vis ul.header_nav_2 li:hover ul.header_nav_3 { 
	display:block; 
}

#cssm1 {
	display:none;
}
#cssm1_vis, #cssm1_vis {
	display: block;
}

#dropdown {
	display: inline-block;
}

ul.header_nav_3 li, li.header_nav_3 {
	display: none;
}
ul.header_nav_2:hover ul.header_nav_3 {
	display: block;
}

ul.header_nav {
	list-style: none; 
	display: inline;
	padding: 0 0 -2px 0;
	margin: 0 0 -2px 50px;
}
ul.header_nav li {	
	display: inline-block;
	padding: 0 0 -2px 0;
	margin: 0 0 -2px 0;
}
ul.header_nav li a, ul.header_nav li a:visited { 
	border-radius: 7px 7px 0 0;
	padding: 5px 15px;
	display: inline-block; 
	text-decoration: none;
	background: #333;
	color: #fff;
	font-style: normal;
}
ul.header_nav li a:hover, ul.header_nav li a:active, ul.header_nav li a:focus { 
	background: #555;
}
#cssm1 *, #cssm1_vis *  { 
	padding:0; 
	margin: 0; 
}
 
#cssm1, #cssm1_vis {
	z-index: 99;  
	position: absolute; 
	/*	float: left;  */
	margin:0; 
	line-height: 30px; 
}
 
#cssm1 a, #cssm1_vis a { 
	display: block; 
	border-bottom: 1px solid #000; 
	background: #abc; 
	text-decoration: none; 
	padding: 3px 10px; 
}
#cssm1_vis a:hover { 
	background: #789; 
}
 
 
#cssm1_vis ul li, #cssm1_vis ul li ul li  { 
	width: 120px; 
}
 
#cssm1_vis ul, #cssm1_vis ul li ul, #cssm1_vis ul li:hover ul li ul{ 
 /*	display:none;*/
	list-style-type:none; 
	width: 120px;
}
 
#cssm1_vis ul, #cssm1_vis ul li:hover ul, #cssm1_vis ul li:hover ul li:hover ul { 
	display:block; 
}
 
#cssm1_vis ul li:hover ul, #cssm1_vis ul li:hover ul li:hover ul { 
	position: relative;
}
 
#cssm1 ul li ul, #cssm1 ul li ul li ul { 
	clear: left; 
	margin-top: -37px;
}
#cssm1 ul { 
	display:block; 
} 
 
#ccsm1_vis, #ccsm1_vis {
	display: block;
	background-position: 0 0;
}
 
#ccsm1 ul.header_nav_2 {
	position: relative;
	width: 120px;
	display: none;
}
#ccsm1 ul.header_nav_2 li ul {
	position: relative;
	width: 120px;
	display: none;
}
#ccsm1_vis ul.header_nav_2 li:hover ul, #ccsm1_vis ul.header_nav_2 li.ie_does_hover ul {
/*	float: left;*/
	display: inline;
	background-position: 0 0;
}
 
#cssm1 ul li ul, #cssm1 ul {
	display: none;
}
#cssm1_vis ul.header_nav_2, #cssm1_vis ul.header_nav_2 li:hover ul.header_nav_3 { 
	display:block; 
}
 
#cssm1 {
	display:none;
}
#cssm1_vis, #cssm1_vis {
	display: block;
}
 
#dropdown {
	display: inline-block;
}
 
ul.header_nav_3 li, li.header_nav_3 {
	display: none;
}
ul.header_nav_2:hover ul.header_nav_3 {
	display: block;
}