Make the entire list area clickable

Question

On my site I have a few links within lists. I was wondering if it is possible to make it so I can click on the entire list area, rather than just where the inner link sits. An example is my "post" link at the top right of the page.

This is the code I'm working with: http://jsfiddle.net/spadez/XgSBf/1/

I tried to put the link outside the list like this but it didn't work:

<a href=#><li>test</li></a>

Answer 1

It's not good coding. try this:

<li><a href="#" style="display: block">test</a></li>

Answer 2

Add display:block to a tag

a {
    text-decoration: none; display:block
}

DEMO