Any ideas on why the below sample piece of code overlays all but drop down boxes?
Any help would be appreciated
<html>
<head>
<title>Pop Up Boxes</title>
<style type=”text/css”>
#japan {position: absolute;
top: 15px;
left: 175px;
width: 100px;
border: solid 2px #000000;
background-color: #ffffff;
color: #000000;
padding: 5px;
z-index: 0;
visibility: hidden;
}
</style>
<script language=”JavaScript”>
function box(boxname,menustate){
if (document.getElementById)
{document.getElementById(boxname).style.visibility =
menustate}
else {document[boxname].visibility = menustate}
}//ends function
</script>
</head>
<body bgcolor=”#aaaaaa”>
<a href=”javascript://”
onMouseOver=”box(‘japan’,’visible’)”
onMouseOut=”box(‘japan’,’hidden’)”>
Click here to test the popup</a>
<select>
<option>GOAT
</select>
<br>
<input type=”text” value=”SHEEP” size=”40″>
<br>
<label>Hello Notice this text and the above is
overlayed with the popup. The drop down box seems to
be weightier in this case. Since it doesn’t go
away.</label>
<br>
<div id=”japan”>
Blah blah blah blah blah blah blah blah blah blah
blah. However, it is not. All it looks like now is a
missing image.
</div>
</body>
</html>