Forum Moderators: not2easy
It didn't quite work as I wanted to, sort of how I remembered. (If you are willing to help me implement it read on :^) )
Anyway...
The Hybrid Dropdown menu uses display: block every 15 lines, but that doesn't seem to help me with what I'm stuck on... (if it does I'm oblivious to it).
display: inline works for the first level of links, but when I rollover a link the second level doesn't appear in IE.
I probably just need more explanation on what cEM suggested----
#top_links ul.level1 li.submenu:hover ul.level2, #top_links ul.level2 li.submenu:hover ul.level3 {
display: block;
}
You've applied the :hover effect to the LI element, which is fine for compliant browsers, but IE does not support the :hover pseudoclass on anything but <a>nchor tags.
Look at Meyer's application again and I think you'll find that he applies the :hover to the anchor. If not, search for an article called "Suckerfish Dropdowns." It explains a method that uses a few lines of javascript to emulate the :hover effect in IE and implement almost-pure css dropdowns. -----
When I went back to the AListApart article they used the hover effect on the LI element and it worked!
I probably need a better explanation on how I should apply the Suckerfish JS to my page...
Thanks a lot!
the glorious cEM
?
how I should apply the Suckerfish JS to my page
The JS in the suckerfish drop menu works by dynamically swapping out class names on the LI element when the mouseover occurs. The matching css for that new classname mimicks the css for the :hover effect (which works in non-IE browsers).
AFAIK, all you should have to do is drop the JS code into your page, and then make sure that the class names and the css match up with the class names and css for your menu, namely the id for the main nav UL, and the class name used by the script (Griffith and Webb use #nav and .over in their article).
If you post the not-working code you are using, perhaps we can help spot what's going wrong.
cEM
