I have a vertical flyout menu on my web site at http://www.bridgeaholics.com/test.html. All the menu items are links and some of them are themselves submenus. The html code is just a series of nested <ul>s and <li>s, and the css that styles the menu text color and text background when the mouse passes over a menu item is an ID (#hilinks) located in the linked style sheet, vertical.css; in particular #hilinks a:hover { color : yellow; background-color : #003399; text-decoration : none; font-size : 75%; } This is applied to a <div> block that encloses the entire nested menu list as follows: <div class="topleft" id="hilinks"> (The Class "topleft" positions the menu structure near the top left of the left column.) Now #hilinks works absolutely perfectly with Safari, Opera 9 and Foxfire 1.5.0.4. All these Mac browsers change the blue text and pale background of the menu links to yellow text and deep blue background when the mouse is over the links. Bizarely, IE for windows changes the text color to yellow correctly, but does NOT change the pale background of any menu item that has a submenu. IE does, however, change the background to deep blue IF the menu item is a toplevel menu item and has no submenu nested below it. I am completely perplexed at how IE could correctly render the text color but not the background color, and then only sometimes fail to do it. http://www.codingforums.com/images/smilies/confused.gif Hope somebody has some suggestions for how to make IE behave consistently and change the background as I want it to. Yellow text on pale background is virtually unreadable, as you can see if you look at my test page at http://www.bridgeaholics.com/test.html This flyout menu is taken from THE JAVASCRIPT ANTHOLOGY by Edwards & Adams.
No, it is NOT fixed. Although it appears to work properly with IE5/6, it only works the first time you try to access a node. Once you have visited a node, the next time you try to go there, the blue background does not come up, and I am left with yellow text on pale tan background, which is virtually unreadable. Try a few times to access About us/Our products/spoons/jam spoons/silver at http://www.bridgeaholics/com/test.html and you will see what I mean. Why should the background be lost once the link has been visited?
Remove this: * html ul.vertical li.hasmenu a:active, * html ul.vertical li.hasmenu a.rollover, * html ul.vertical li.hasmenu a.rollover:visited { background: expression(/hasmenu/.test(this.parentNode.className) ? "url(right-red.gif) #ffefcf no-repeat 95% 50%" : "#ffefcf"); } Code (markup):