I just learned a great little Web coding concept called “link padding.” The idea applies mainly to adjacent menu items. Instead of letting the mouseover area default to the bare text of a link, with a blank space between items, text padding uses CSS to space out the items, which means there’s a larger mouseover area around each.
Here’s a quick example. Move your mouse slowly back and forth between Link 1 and Link 2. Then do the same with Link 3 and Link 4.
Notice how much more pleasant the move is between the latter links? And up and down around them? That’s the magic of link padding.
You can take a look at my page source for an example of the code involved. (If you’re using Firefox, you can even isolate the specific code by highlighting what you want to see, right-clicking the page, and choosing “View Selection Source.”) Note that I exaggerated the spacing between Links 1 & 2 to emulate the sort of spacing you might see in a menu.
For more about link padding, check out “Generous link targets in the library” and “Padded link targets for better mousing.”
This is definitely a trick I’ll be employing in the future—and retrofitting to my existing sites!