HowToCreate.co.uk has an interesting guide to creating a purely CSS-based nested-list menu. This technique uses absolutely no Javascript except for IE 5 for windows. Here is the list of supported browsers:2. Good write up. I'm glad to see this getting some attention.
I have a version I use that works with the hover on the LI instead of the link, so it works as one would expect a menu to work. Also, it does not use the '>' operator, but the CSS is a tad bit trickier (just have to show/hide using nested li elements) but it works great (I haven't tested it in all browsers yet).
Email me if you want a copy of the HTC file and a sample CSS script. I can't remember the site I got the HTC script from or else I'd point ya there.
Posted at 10:38PM on Jul 30th 2006 by Rob Erekson
Other Weblogs Inc. Network blogs you might be interested in:
1. One thing to note about the article, and more specifically the code for the menus themselves:
Although the menus "work" in IE6 and 7, i've noticed an undesired behavior that should be correctable. In IE7, hovering over the box of the menu item doesn't do anything. You have to hover on the link itself. This creates a problem when attempting to go from one menu level to another. As soon as your mouse moves off the link text, the mouseout effect kicks in and you lose the submenu.
Best way i can think of to correct this is to define your links in the menu as block-level elements with display: block; so that they consume the entire horizontal space of their container box. i haven't tested it, but i've run into the problem before and that typically corrects it.
i wanted to post this at the Howtocreate site itself, but the author has apparently taken a hiatus from the site and isn't accepting emails.
Posted at 7:59PM on Jul 29th 2006 by Joe T.