IE vertical menu overlapping bug

http://80.80.133.103:81/templates/133/

This is the menu. As you can see in FF/Safari everything works great but in IE6/7 the first level of the menu overlaps the second level when it's supposed to be the other way around. I've tried with z-index, float and blocked for all the ul and li but nothing seems to help. Any ideas how to fix that ?

Here's the exact code if you don't want to go all the way through the HTML and the CSS:

<ul class="catalogue">
					<li class="limg">
						<a href=""><img src="images/img-1.gif" alt="" /></a>
						<ul>
							<li>
								<a href="">zakelijk</a>
								<ul>
									<li><a href="">foto's</a></li>
									<li><a href="">referenties</a></li>
								</ul>
							</li>
							<li>
								<a href="">particulier</a>
								<ul>
									<li><a href="">foto's</a></li>
									<li><a href="">referenties</a></li>
								</ul>
							</li>
						</ul>
					</li>
</ul>

Code (markup):

and the CSS (just for the first and the second level of the menu):

ul.catalogue li:hover ul {
	display: block;
	width: 123px;
	top: 149px;
	left: 20px;
	z-index: 100;
}

ul.catalogue li:hover ul ul {
	display: none;
}

ul.catalogue ul li {
	background: none;
	background-color: #e3dfdd;
	border: 1px solid #c9c7c6;
	height: 27px;
	line-height: 27px;
	width: 121px;
}

ul.catalogue ul li a {
	background: none;
	padding: 0;
	margin: 0;
	display: block;
	text-align: center;
	line-height: 27px;
	font-size: 8px;
	color: #958881;
	width: 121px;
	height: 27px;
}

ul.catalogue ul li:hover {
	background-color: #b5a9a3;
	border-color: #797675;
}

ul.catalogue ul li:hover a {
	text-decoration: none;	
}

ul.catalogue ul li:hover ul {
	display: block;
	left: 80px;
	top: 15px;
}

Code (markup):