Woo hoo!!! I figured out how to fix the problem with the blank menus in IE7!!!
The bug in IE7 is documented here: http://murphy.cz/ie7-hover-ghosts-bug/
I couldn't have done this without this website.
Here's how to fix it:
div#dropMenu li a.noLine {border:none;}
div#dropMenu>ul a {width: auto; z-index:1000;}
CHANGE THIS:div#dropMenu ul ul {display: none;}
div#dropMenu ul ul li {border-bottom: 1px solid #CCC; width:12em;z-index:1000;}
/*div#dropMenu li.submenu li.submenu {background: url(../images/submenu.gif) 95% 50% no-repeat;} */
div#dropMenu ul.level1 li.submenu:hover ul.level2,
div#dropMenu ul.level2 li.submenu:hover ul.level3,
div#dropMenu ul.level3 li.submenu:hover ul.level4,
div#dropMenu ul.level4 li.submenu:hover ul.level5,
div#dropMenu ul.level5 li.submenu:hover ul.level6,
div#dropMenu ul.level6 li.submenu:hover ul.level7,
CHANGE THIS:div#dropMenu ul.level7 li.submenu:hover ul.level8 {display:block;z-index:1000;position: absolute; width: 12em;}
div#dropMenu ul.level2 {background:#4f4f4f;z-index:1000;position:absolute;left:0;}
div#dropMenu ul.level3,
div#dropMenu ul.level4,
div#dropMenu ul.level5,
div#dropMenu ul.level6,
div#dropMenu ul.level7,
div#dropMenu ul.level8{top: 0; left: 12em; background:#4f4f4f}
div#dropMenu ul.level2 a {padding: 0.5em 0 0.5em 0.25em; color: white; text-transform:none;} /* this is text color on drop-down submenu */
div#dropMenu ul.level2 a:hover {color:#4f4f4f;}
Essentially, all I did was move "position: absolute; width: 12em;" to a new spot. Problem solved!!! :)
Bookmarks