CSS Problem IE8 im IE7-Mode

[sho]

Hallöchen,
wer hätte es gedacht: Ich habe ein Problem :-) Mein 2-Ebenen Klappmenü läuft erfolgreich in diversen getesten Browsern (Chrome, Opera, FF, IE6-8, Safari..)
ABER: Wenn man im IE8 per Entwicklertools den IE7-Mode laufen lässt, dann wird die 2. Ebene, also das Klappmenü, um 30px nach oben "verschoben". Nur dann. Grrr. Sage ich dem css für das Klappmenü display:block und margin-top 30px, gehts na klar, aber dann gehts im "echten" IE7er nicht mehr. Hä? Was macht denn der IE7 Mode anders? Ich raste aus :-)

  
ul#menu{  
	width:420px;  
	top:72px;  
	left:30px;  
	margin:0;  
	padding:0;  
}  
ul#menu a{  
	display:block;  
	height:30px;  
	text-decoration:none;  
}  
ul#menu li{  
	position:relative;	  
	float:left;  
	list-style:none;  
	display:block;  
}  
.clear{  
clear:left;  
}  
ul#menu ul{  
	position:absolute;	  
	right:0px;  
	margin:0;  
	padding:0;  
	display:none;  
}  
ul#menu li:hover ul{  
	display:block;  
}  
ul#menu ul li{  
	float:none;  
	width:100px;  
	line-height:30px;  
	display:block;  
	border-bottom:solid 1px #cd071e;  
}  
  
ul#menu ul li a{  
	display:block;  
	width:210px;  
	height:30px;  
	background:#000000;  
}  
ul#menu ul li a:hover{  
	display:block;  
	width:100px;  
	height:30px;  
}  

html struktur:

  
				<ul id="menu">  
					<li><a id="menulink1" href="#"></a>  
						<ul>  
							<li><a id="sublink1" href="#"></a></li>  
							<li><a id="sublink2" href="#"></a></li>  
							<li><a id="sublink3" href="#"></a></li>  
							<li><a id="sublink4" href="#"></a></li>  
						</ul>  
					</li>  
					<li><a id="menulink2" href="#"></a></li>  
					<li><a id="menulink3" href="#"></a></li>  
					<li><a id="menulink4" href="#"></a></li>  
	  
					<li class="clear"></li>  
				</ul>  
  
					  

Ideen, jemand? Danke..

[sho]

fehlte noch was^^

ul#menu a{
width:80px; /*Hier noch die Breite*/
background:#e3e4e4; /*Und eine Farbe*/
}
ul#menu ul li a{
width:80px; /*nicht 210px*/
}