Here is something I whipped up fast. I don't really have time to test it or give you the solution you need. But this should get you thinking as to what you need to do.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script language="JavaScript" type="text/javascript">
var agt = navigator.userAgent.toLowerCase();
var is_ie = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1));
function hide_mine(elmnt) {
if( !is_ie ) return;
var a = elmnt.getElementsByTagName("div");
var div = a[0];
elmnt.style.zIndex = 1;
div.style.display = "none";
}
function show_mine(elmnt) {
if( !is_ie ) return;
var a = elmnt.getElementsByTagName("div");
var div = a[0];
elmnt.style.zIndex = 100;
div.style.display = "block";
}
</script>
<style type="text/css">
div.inline {
width: 150px;
height: 50px;
position: relative;
background: red;
border: 2px solid black;
text-align: center;
}
div.pop {
display: none;
position: absolute;
top: 40px;
left: 140px;
z-index: 50;
background: white;
border: 1px solid black;
width: 300px;
height: 100px;
}
div.inline:hover div.pop {
display: block;
}
</style>
</head>
<body>
<div class="inline" onmouseover="show_mine(this);" onmouseout="hide_mine(this);">
Here is some sort of button or something!
<div class="pop">
<strong>This is a big old pop-up!</strong>
</div>
</div>
</body>
</html>
