Why does my drop down CSS based menu not work in IE9?

http://www.mapleboutique.com/

it displays fine, but once you start hovering over things start to get really ugly. I've only tested it so far in IE9 and working my way down to IE6 (ahhhhh).

anway here is my CSS as well. (I tried pasting it here and formatting it with the code tags, I don't know why I can't even figure that out).

http://www.mapleboutique.com/stylesheets/main.css

There are two main problems that I can see:

1. Your <ul> is invalid. You cannot wrap an <li> in a <div>. The only valid child of a <ul> is an <li>.

2. It is invalid to reuse the id #hoverNavi. Id's may only be used once on a page. Try using a class instead.

Main.css, line 417: filter:alpha(opacity=93); /* for IE */

It looks like that once an element is set with an opacity < 100, the opacity is not restaured on mouseout, causing float:left on menu elements properties to fail...

Comment this line, so your menu will work (but without transparency). On IE7,8,9.

If you want transparency on IE, try to implement it with jQuery, and don't forget to restaure it onmouseout