How to work around IE7 silliness (z-index)

[backa]

I'm working on a map, which has clickable marked areas on it, and on hover each area brings up a popup. Works fine in all browsers except IE7 (unfortunately I need to get it working there too). In ie7 it just shows all the popups at once. I'll be happy with a way to just display the marked areas with no hover popups at all.

The code for the popups:

.popup{ 
	width:150px;
	height:45px;
	position: absolute;
	top: -6px;
	left: -150px;
	z-index:-1;
	margin: 5px 5px;
	text-align: center;
	background-color: black;
}
.popup p{
	margin: 5px 0 0 0;
}
#itpin{ 
	width: 40px;
	height: 31px;
	position:absolute;
	top:412px;
	left:465px;
	cursor: default;
}
#itpin:hover .popup{ 
	z-index:2;
}

So the popup sits behind the main image until mouse hover, when z-index changes to 2 to bring it forward. IE7 seems to go straight to z-index:2. the text that appears in the popups is in the html.

[backa]

ok I got it working in IE7 , don't ask me how.