How do I make the whole area of a list item in my navigation bar, clickable as a link?

Question

I've got a horizontal navigation bar made from an unordered list, and each list item has a lot of padding to make it look nice, but the only area that works as a link is the text itself. How can I enable the user to click anywhere in the list item to active the link?

Answer 1

Don't put padding in the 'li' item. Instead set the anchor tag to display:inline-block; and apply padding to it.