[Solved] What is happening here?

Hi all,

I made a multi-level menu with a modified A List Apart. It works fine will Firefox and Safari. But when I tested it on IE the drop-down menu moved to the right...

Here is the web site
http://filipinobible.99k.org

And here is the CSS:

****************************************************************************************** @charset "UTF-8"; * { margin:0; padding:0; }

p {
padding:10px 0 10px 0;
font-family:Geneva, Arial, Helvetica, sans-serif;
}

Body {
background-image:url(asset/images/Web-Layout_05.gif);
background-repeat:repeat-x;
}

#container {
margin:0 auto;
padding:0;
width:717px;
background-color:white;
border-left-style: outset;
border-left-color: #a4a3a3;
border-left-width:5px;
border-right-style: inset;
border-right-color: #a4a3a3;
border-right-width:5px;
}
#rightedge {
overflow:auto;
}

#header {
background-image:url(asset/images/Header.jpg);
width:717px;
height:117px;
}

#flash {
background-color:blue;
width:717px;
height:163px;
}

#navbar {
background-color:#b6b3b3;
width:717px;
height:1em;
padding:.5em 0;
}

#navbar a {
color:black;
text-decoration:none;
font-size:90%;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
}

#nav, #nav ul {
padding:0;
margin: 0;
list-style: none;
line-height: 1;
text-align:center;
}

#nav a {
display: block;
width: 100%;
}

#nav li { /* all list items */
position:relative;
float: left;
width: 20%; /* width needed or else Opera goes nuts */
}

#nav li ul { /* second-level lists */
position: absolute;
background: #b6b3b3;
width:8.5em;
left: -999%; /* using left instead of display to hide menus because display: none isn't read by screen readers */
}

#nav li ul li {
width:100%
}

#nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */
left: 0;
}

#announcement {
float:right;
width:202px;
}

#announcement h2 {
padding-top:20px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:smaller;
text-align:center;
text-decoration:underline;
}

#content {
padding:25px;
}

h1 {
margin-bottom:20px;
}

#footer {
background-color:#b6b3b3;
position:relative;
width: 717px;
clear: both;
text-align:center;
font-size:.8em;
}

.copyright {
color:#4D4D4D;
}

#footer a {
color:black;
text-decoration:none;
}

#footer a:hover {
text-decoration:underline;
}

******************************************************************************************

Thank you all!

Vincent