CSS Horizontal Menu: display: inline AND block? Make link cover whole LI?

Question

Normally, to make the link fill out the whole li, I use display: block;. But with a horizontal menu, I need to set it to display:inline; so it goes in one line. I've tried display:inline-block; but that doesn't help. I've seen horizontal menus that accomplish this, but I can't find out how from their source.

Any ideas? Thanks.

Answer 1

Apply height and width to the parent li elements, and then:

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

JS Fiddle demo.