IE displays only position:absolute elements until mouse click

Fixed when position:absolute is removed.

[Corey Fuhrhop]

I'm having problems with the folowing css menu. It works fine in FF3. When I place it on my page and view in Internet Explorer, the menu displays properly, and the background color of the page is correct, but none of the rest of the page is displayed at all. However, the page appears if you left mouse click anywhere on the page.
If I change the div.dropmenu position to anything other than absolute it displays the rest of the page without having to click, but I want this menu to be in a certain spot and to not displace other elements when it expands.
So basically... #*$!?

Thanks for any help

<style type='text/css'>
div.dropmenu {
position:absolute;
top:5px;
left:650px;
}
li {
list-style: none;
}
div.item {
color:navy;
border:double;
border-color:black;
border-width:2;
background-image:url('menubg.gif');
margin: 0 -5 0 0;
}
div.item:hover {
color:white;
background-image:url('menubg2.gif');
}
a.category{
position:relative;
display:block;
left:-20px;
width:200px;
color:white;
font-weight:bold;
border:solid;
border-color:black;
border-width:2;
background-image:url('menubg2.gif');
}
a.sublink {
display:inline-table;
padding-left:15px;
width:200px;
color:navy;
font-weight:bold;
text-decoration:none;
border:double;
border-color:black;
border-width:2;
background-image:url('menubg.gif');
}
a.sublink:hover {
font-weight:bold;
color:white;
background-image:url('menubg2.gif');
}
li.sublink{
background-image:url('menubg.gif');
}
li.sublink:hover {
font-weight:bold;
color:white;
background-image:url('menubg2.gif');
}
li.midlink {
color:navy;
text-decoration:none;
border:double;
border-color:black;
border-width:2;
background-image:url('menubg.gif');
}
li.midlink:hover {
font-weight:bold;
color:white;
background-image:url('menubg2.gif');
}
div.menutop {
color:navy;
font-weight:bold;
width:200px;
}
div.menutop:hover {
font-weight:bold;
color:white;
background-image:url('menubg2.gif');
}
div.sub1 {
margin-left:20px;
border:double;
border-color:black;
border-width:2;
width:180px;
display:none;
}
div.mid1{
margin-left:10px;
display:none;
}
</style>
<div class=dropmenu>
 <div class='menutop' onmouseover="expand('mid1')" onmouseout="collapse('mid1');">
 <div class=item>Administrative Options</div>
 </div>
 <div class='mid1' id=mid1 onmouseover="expand('mid1')" onmouseout="collapse('sub1');collapse('mid1');">
 <ul>
 <li class=midlink onmouseover="expand('mid1');expand('sub1')" onmouseout="collapse('sub1');">
 <select id=SpecList>
 <option value=1>Name
 </select>
 </li>
 </ul>
 </div>
<div class='sub1' id=sub1 onmouseover="expand('mid1');expand('sub1')" onmouseout="collapse('sub1');collapse('mid1');">
 <a class=sublink href="javascript:document.getElementById('corey').SpecList.options[document.getElementById('corey').SpecList.selectedIndex+1].selected=true;document.getElementById('corey').Specialist.value=document.getElementById('corey').SpecList.value;document.getElementById('corey').action='myschedule.asp';document.getElementById('corey').submit();">Schedule</a></br>
 </div>
</div>

[Corey Fuhrhop]

By the way, there is more to the menu than what is shown, but I can't post it for "corporate security issues"