Sub Menu Alignment Wrong in IE

[QuantumPressure]

Hi Everyone,

Sorry to bug everyone about this, but I'm sure this problem is due to crapy coding on my part (I don't have that much experience in CSS and am learning). Anyway, the problem is simple... You move the mouse over a link on the main nav, then there's a drop down with sub links. The only problem is that in IE the sub menu appears to the right of the selected main nav link (see pic). Although in FF, sub menu appears directly under the selected main nav link. So how what would be the fix for this so that the sub menu would show up directly underneath the main nav.

IMAGE: http://server6.theimagehosting.com/image.php?img=sub menu.jpg

HTML

<ul class="glossymenu">
<li><a href="#"><b>Home</b></a>
<ul>
<li><a href="#"><b>Link</b></a></li>
<li><a href="#"><b>Link</b></a></li>
<li><a href="#"><b>Link</b></a></li>
<li><a href="#"><b>Link</b></a></li>
</ul></li>
<li><a href="#"><b>News</b></a>
<ul>
<li><a href="#"><b>Link</b></a></li>
<li><a href="#"><b>Link</b></a></li>
<li><a href="#"><b>Link</b></a></li>
<li><a href="#"><b>Link</b></a></li>
</ul></li>
<li><a href="#"><b>Services</b></a></li>
<li><a href="#"><b>Public Education</b></a></li>
<li><a href="#"><b>Employees</b></a></li>
<li><a href="#"><b>About Us</b></a></li>
<li><a href="#"><b>Contact</b></a></li>
</ul>

CSS

ul {
padding: 0;
margin: 0;
list-style: none;
}

li {
float: left;
position: relative;
}

li ul {
display: none;
position: absolute;
top: 1em;
left: 0;

background: #827961;
background-image: none;
}

li > ul {
top: 36px;
left: auto;
}

li:hover ul { display: block;
}

.glossymenu{
position: relative;
padding: 0 0 0 0px;
margin: 0 auto 0 auto;
background: url(images/menu_bg.gif) repeat-x; /*tab background image path*/
height: 46px;
width: 800px;
list-style: none;
}

.glossymenu li{
float:left;
}

.glossymenu li a{
float: left;
display: block;
color:#000;
text-decoration: none;
font-family: sans-serif;
font-size: 13px;
font-weight: bold;
padding:0 0 0 16px; /*Padding to accomodate left tab image. Do not change*/
height: 46px;
line-height: 46px;
text-align: center;
cursor: pointer;
}

.glossymenu li a b{
float: left;
display: block;
padding: 0 24px 0 8px; /*Padding of menu items*/
}

.glossymenu li.current a, .glossymenu li a:hover{
color: #fff;
background: url(images/menuhover.gif) no-repeat; /*left tab image path*/
background-position: left;
}

.glossymenu li.current a b, .glossymenu li a:hover b{
color: #fff;
background: url(images/menuhoverright.gif) no-repeat right top; /*right tab image path*/
}