Menu Control: How to Make Whole Item Clickable, not Just Text

Question

I have a problem that confuses my users, being that although an item is highlighted (by the hover style) when the user mouses over it, they have to mouse over the actual item text, sometimes quite small compared to the item. Is there a way to make the whole item clickable?

Answer 1

Add some padding to the A element? Or if it's in a menu contained within a block-level element, make the A display as block too:

a {
  display: block;
  width: 100%;
}

Answer 2

If you only have the text in the <a> ... </a>, that's the only part that can be clicked on. Move your graphics, etc. inside the link.