Hi,
There are quite a few different issues at play here:
Firstly, the flickering issue is due to your use of the csshover.htc
file. Remove that and your flicker will disappear. Then, in order to
get hovers working in IE, just add a selector that uses the sfHover
class along side the regular :hover selector. For example, where you
have:
.nav li.navHome:hover { ... }
...change it to:
.nav li.navHome:hover,
.nav li.navHome.sfHover { ... }
Second, regarding the full width not displaying correctly, you need to
add widths to certain elements. Begin by moving the font-size:11px
from your a elements and apply that to the containing .nav element.
This way all em units will be the same throughout the menu. Then
remove the 10px padding from the .nav li li elements and instead apply
1em padding to a new rule with the selector .nav ul a which will be
the links in the submenu. This way the entire list item is clickable
instead of just the text. Now the important bit: change every instance
of the value 9.45em to 14.45em (remember, ems are now smaller due to
the font-size change). This means anywhere that 9.45em appears as the
value of an element's width or it's left offset. Then add
width:12.45em to your new rule (.nav ul a). This makes the submenu
links be the same overall width as their parent ul (12.45em + 1em
padding on each side = 14.45em). This is necessary so that the width
stays the same instead of snapping open after the animation runs.
At this point you should be all set. Good luck.
Joel Birch.
