Does anyone know how to create a horizontal dropdown menu using pure CSS and no Javascript? It must be compatible with all major browsers, including IE 6. I heard that it's difficult to make compatible with IE 6 because IE 6 doesn't support the hover state in li elements. I need to replace the Javascript main menu on my site, Coupons To Your Inbox. If anyone can show me how to do it, I'll give them the template packs mentioned in my signature.
http://www.htmldog.com/articles/suckerfish/dropdowns/ There are some menus that use conditional comments to insert invalid HTML, but I don't recommend using them. While Suckerfish has a tiny bit of JavaScript, it's only needed for IE 6 and below (since IE <7 doesn't understand :hover on non-anchor elements).
Thanks for the help, Dan. Reputation added! However, I need a PURE CSS menu. No Javascript at all. Is that not possible? I want a pure CSS menu because, as I understand it, people who disable Javascript cannot see the pure Javascript menu that I am currently using. And, if I use a partially-Javascript menu, its full functionality will not be observed by the same people. Is this not really that big of a problem? Is it only a very small proportion of people who disable Javascript?
Unfortunately, as I mentioned above, there is no such thing as a pure CSS menu (yes, there are hacks that use conditional comments to nest tables inside the links, but that's not valid HTML anyway). Also note that the JavaScript is targeted ONLY for IE 5.x and 6. IE 7, Firefox, Opera, Safari, and pretty much every other modern browser won't need the JavaScript because they understand :hover works on everything, not just <a> tags. The only alternative to using a dropdown menu for IE 5.x and 6 when scripting is disabled is to use the * html hack to deliver separate rules that style the dropdowns to appear as child menu options underneath the main menu option. You'll have to use a "current-page" rule for this, of course, but it can work. Just make sure you write the special .over class rules inside the hack so that when the class is applied via JavaScript the default rules get replaced outright with the new ones. It'll take some extra work, but it can be done while still being (mostly) accessible. (I say mostly because you can't have the dropdown menus be accessible to keyboard navigation users without using JavaScript and a lot of advanced CSS.)
Yes, you can write a horizontal dropdown menu in pure HTML/CSS and it will pass W3C validation and work in all modern browsers, including IE 6. However, it won't work in IE when you have elements that are parsed by Windows OS, such as forms, Flash, QuickTime, etc. You can employ an iframe shim to fix this which is also valid HTML/CSS, but the hack has to be written individually for each and every instance. There is a javascript hack that fixes this globally in the same way an htc hack would. I use it on ecommerce sites where a global dropdown menu will be used on all pages, many having the problem elements on them. Forms are always used in ecommerce with dynamic content so a static hack just won't work. This javascript has not been published and is not available for free.