CSS Rollover Dropdown Navigation Menu -- IE Problem

I found a page with a CSS drop down menu, and built one for a site of my own using thier coding techniques. The menu that I have works fine in Mozilla/Firefox 1.0 and in Netscape 7.1 but not in any version of IE. The tutorial site had added a small piece of javascript because IE didnt regonize the 'hover' on any element except anchors. My page isnt dropping the menus that appear under the headings. Oh yeah, the menu is based on tweaking the layout of nested Unordered Lists <UL>

Here is my page: My CSS Drop Menu (http://dev.esult.com/mnchemical/template.htm)

Here is the example: CSS Drop Example (http://www.alistapart.com/articles/dropdowns/)

Here is all my CSS:

#nav {
float: left;
width: inherit;
padding: 0;
margin: 0;
background-color: #C8B77F;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #3E3317;
border-bottom: 1px solid;
border-bottom-color: #61522B
}

/* NAVIGATION DROP-MENU */

#nav ul { /* all lists */
color:#3D3415;
background-color:#C8B880;
}

#nav li { /* all list items */
padding: 3px 20px 3px 20px;
float: left;
position: relative;
background-color:#C8B880;
}

#nav li ul { /* second-level lists */
width: 12em;
display: none;
margin: 4px 0px 0px 0px;
padding:0;
position: absolute;
top: 1em;
left: 0;
background-color: #EEE1B5;
border: 1px solid #61522B;
border-top: none;
}

#nav li ul li {
clear: left;
padding: 2px 0px 3px 4px;
background-color: #EEE1B5;
}

#nav li>ul {
top: auto;
left: auto;
}

#nav li:hover ul, li.over ul {
display: block;
}

The only element IE supports :hover on is a

I did some checking and the javascript is working and the class is being added and removed from the LI element, IE is just ignoring the class for some reason.

I also noted that in Firefox if you move too slowly between the top level menu and the menu items underneath that the menu will disappear on you so there's an additional problem you may not be aware of yet.

Well...

It is sort of fixed. It seems that IE was confused/hated the #nav IDs before the ul & li definition in the CSS. once removed it acted properly but the positioning is a little whack. Im trying to find a hack so that IE will put the drop downs in the right spots like Firefox/Mozilla does. Thanks to those who commented :thumbsup: