I have a CSS dropdown menu with 1 sublevel which I want centered on my page. It looks fine when centered if I use Firefox, but in IE, the sublevels now pop out to the right of the main item and the 1st item doesnt show.

Here's my CSS for IE:

Code:
div.menu
{
position:relative;
height:30px;
display:block;
margin: 0 auto;
text-align:left;
}

ul.menu
{
top:0px;
left:0px;
position:relative;
padding:0px;
margin: 0 auto;
display:block;
float:left;
}

ul.menu li {
float:left;
}

ul.menu ul
{
position:relative;
margin:0px;
top:0px;
left:0px;
padding:0px;
display:block;
}

ul.menu ul li
{
display:inline;
float:none;
position:relative;
top:0px;
left:0px;
}

a.menu
{
display:block;
width:100px;
height:30px;
margin-top:-4px;
}
a.menu:hover
{
display:block;
}
And my HTML:

Code:
<body onload="MM_preloadImages('../Pictures/CoachesY.png','../Pictures/ScheduleY.png','../Pictures/RostersY.png','../Pictures/Sub Buttons/CoachHenriottY.jpg','../Pictures/Sub Buttons/CoachWitteY.jpg','../Pictures/Sub Buttons/CoachSchneiderY.jpg','../Pictures/Sub Buttons/CoachReevesY.jpg','../Pictures/Sub Buttons/FreshmanY.jpg','../Pictures/Sub Buttons/JVY.jpg','../Pictures/Sub Buttons/VarsityY.jpg','../Pictures/CampsY.png','../Pictures/SummerInfoY.png','../Pictures/LinksY.png','../Pictures/YouthInfoY.png','../Pictures/DirectionsY.png')" align="center">
<table width="690" align="center" bgcolor=#8560A9>
  <tr><td bordercolor="#FFFFFF" bgcolor="#8560A9">
<table width="690" border="0" align="center">
  <tr bgcolor="#FFFFFF" height="227">
    <td height="15" bgcolor="#8560A9"><div id="center"><img src="../Pictures/TitlePhoto.jpg" alt="Lady Elks Basketball" width="800" height="200" /><br />
	  <div class="menu">
   <ul class="menu">
      <li><a class="menu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','../Pictures/CoachesY.png',1)"><img src="../Pictures/CoachesP.png" name="Image1" width="100" height="30" border="0" id="Image1" /></a>
         <ul>
            <li><a class="menu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','../Pictures/Sub Buttons/CoachHenriottY.jpg',1)"><img src="../Pictures/Sub Buttons/CoachHenriottP.jpg" name="Image4" width="100" height="30" border="0" id="Image4" /></a></li>
            <li><a class="menu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','../Pictures/Sub Buttons/CoachWitteY.jpg',1)"><img src="../Pictures/Sub Buttons/CoachWitteP.jpg" name="Image5" width="100" height="30" border="0" id="Image5" /></a></li>
            <li><a class="menu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image6','','../Pictures/Sub Buttons/CoachSchneiderY.jpg',1)"><img src="../Pictures/Sub Buttons/CoachSchneiderP.jpg" name="Image6" width="100" height="30" border="0" id="Image6" /></a></li>
			<li><a class="menu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','../Pictures/Sub Buttons/CoachReevesY.jpg',1)"><img src="../Pictures/Sub Buttons/CoachReevesP.jpg" name="Image7" width="100" height="30" border="0" id="Image7" /></a></li>
         </ul>
      </li>
   </ul>
   <ul class="menu">
      <li><a class="menu" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','../Pictures/ScheduleY.png',1)"><img src="../Pictures/ScheduleP.png" name="Image2" width="100" height="30" border="0" id="Image2" /></a>
         <ul>
            <li><a class="menu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image8','','../Pictures/Sub Buttons/FreshmanY.jpg',1)"><img src="../Pictures/Sub Buttons/FreshmanP.jpg" name="Image8" width="100" height="30" border="0" id="Image8" /></a></li>
            <li><a class="menu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image9','','../Pictures/Sub Buttons/JVY.jpg',1)"><img src="../Pictures/Sub Buttons/JVP.jpg" name="Image9" width="100" height="30" border="0" id="Image9" /></a></li>
            <li><a class="menu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image10','','../Pictures/Sub Buttons/VarsityY.jpg',1)"><img src="../Pictures/Sub Buttons/VarsityP.jpg" name="Image10" width="100" height="30" border="0" id="Image10" /></a></li>
         </ul>
     </li>
   </ul>
   <ul class="menu">
      <li> <a class="menu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','../Pictures/RostersY.png',1)"><img src="../Pictures/RostersP.png" name="Image3" width="100" height="30" border="0" id="Image3" /></a>
         <ul>
            <li><a class="menu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image13','','../Pictures/Sub Buttons/FreshmanY.jpg',1)"><img src="../Pictures/Sub Buttons/FreshmanP.jpg" name="Image13" width="100" height="30" border="0" id="Image13" /></a></li>
            <li><a class="menu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image12','','../Pictures/Sub Buttons/JVY.jpg',1)"><img src="../Pictures/Sub Buttons/JVP.jpg" name="Image12" width="100" height="30" border="0" id="Image12" /></a></li>
			<li><a class="menu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image11','','../Pictures/Sub Buttons/VarsityY.jpg',1)"><img src="../Pictures/Sub Buttons/VarsityP.jpg" name="Image11" width="100" height="30" border="0" id="Image11" /></a></li>
         </ul>
      </li>
   </ul>
   <ul class="menu">
   	  <li><a class="menu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image14','','../Pictures/CampsY.png',1)"><img src="../Pictures/CampsP.png" name="Image14" width="100" height="30" border="0" id="Image14" /></a></li>
   </ul>
   <ul class="menu">
   <li><a class="menu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image15','','../Pictures/SummerInfoY.png',1)"><img src="../Pictures/SummerInfoP.png" name="Image15" width="100" height="30" border="0" id="Image15" /></a></li>
   </ul>
   <ul class="menu">
   <li><a class="menu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image16','','../Pictures/LinksY.png',1)"><img src="../Pictures/LinksP.png" name="Image16" width="100" height="30" border="0" id="Image16" /></a></li>
   </ul>
   <ul class="menu">
   <li><a class="menu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image17','','../Pictures/YouthInfoY.png',1)"><img src="../Pictures/YouthInfoP.png" name="Image17" width="100" height="30" border="0" id="Image17" /></a></li>
   </ul>
   <ul class="menu">
   <li><a class="menu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image18','','../Pictures/DirectionsY.png',1)"><img src="../Pictures/DirectionsP.png" name="Image18" width="100" height="30" border="0" id="Image18" /></a></li>
   </ul>
</div><br />
    </div>	</td>
    </tr>
	  </table>
</td></tr></table>
</div>
</body>
Any help would be appreciated.