CodingForums.com - How to work around IE7 silliness (z-index)

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:

Code:

.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.