Friday, October 1, 2010

Problems with CSS hover menus (drop-downs)

Problem: The browser supports :hover only on links, rather than on any element, thereby
making drop-downs like that in Chapter 5’s “Creating a drop-down menu” exercise fail.


Solution: Use some kind of JavaScript fallback system. There are various options for this,
but the simplest is the solution offered by Peter Nederlof at www.xs4all.nl/~peterned/
csshover.html. All you need to do is download either csshover.htc or csshover2.htc,
place it somewhere within your site’s hierarchy, and then link to it through a rule in a style
sheet linked via a conditional comment.
body {
behavior: url(csshover2.htc);
}
Another solution is to use HTML Dog’s Suckerfish Dropdowns (www.htmldog.com/
articles/suckerfish/dropdowns/), which works nicely all the way back to Internet
Explorer 5, and uses perfectly valid CSS.

No comments:

Post a Comment