css navbar problem in aol browser

[AdamSayer]

hey all, first post.

I've been having some problems putting some code behind a website that a client designed. They wanted dropdown menus so i opted to use the "son of suckerfish" dropdowns. I finally got everything worked out in IE and Mozilla, but at the request of the client, need to also have it bug free in AOL Explorer. Now, correct me if I'm wrong, but I thought AOL Explorer ran on the same engine that IE6 did. For some reason it's just not treating my dropdowns the same way IE does. For some reason, the dropdowns are freezing when i click a link on them.

The url is here:

http://www.adamsayer.com/heavens_magic/index.html

Here is the code from my stylesheet:




body {
font-family: arial, helvetica, serif;
font-size: 80%;
padding: 2em;
margin: 0;
list-style: none;
background-color:#FAF9FF;
}

#navigation {
width:676px;
display: block;
text-align:center;
padding-left: 62px;
padding-right: 62px;
list-style:none;
}

#nav, #nav ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
line-height: 1.25;
}

#nav a {
display: block;
width: auto;
}

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

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

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

#content {
width: 800px;
background-color: #faf9ff;
padding: 1em 0;
margin: auto;
voice-family: "\"}\"";
voice-family:inherit;
width: 800px;
list-style:none;
text-align:justify;
}



I'm kind of a newbie to css, so im really not exactly sure how it reacts between the different browsers...I just can't find any aid when i page through google results for AOL Browser