Make whole as link with proper HTML

Question

I know this has been up a lot of times before, but I couldn\'t find any solution in my specific case.

I\'ve got a navigation bar and I want the whole

Answer 1

I think you may have meant inline-block, not inner-block:

li a {display: inline-block; height: 100%; width: 100%; }

Also, inline-block has its own set of problem with older IE browsers, and probably won't react how you'd expect.

Answer 2

Just format the a directly instead of the li with your styles.

I have alterd your fiddle http://jsfiddle.net/BrcZK/1/

Answer 3

Here's what I do:

a { display: block; }

Then style the anchors as I see fit.

Here's the fiddle: http://jsfiddle.net/erik_lopez/v4P5h/