stretching link throughout entire <li> - html

Question

the text within the li is a link, where as the entire li item including the text should work as a link. How can I get it so that the entire li item operates as link as opposed to just the text within the li?
CSS:
#navbar {
width: 900px;
height: 50px;
background-image: url(http://iforce.co.nz/i/chiislxt.mp4.png);
}
#navbar ul {
list-style-type:none;
margin:0px;
padding:0px;
text-align: center;
}
#navbar ul li {
height: 50px;
width: auto;
float: left;
padding-left: 20px;
padding-right: 20px;
line-height: 50px;
border-right: 1px solid black;
}
#navbar ul li a {
display: block;
height: 100%;
}
#navbar a:link {
font-weight:bold;
color: black;
font-family: Franklin Gorthic Heavy, Helvetica, sans-serif;
text-decoration: none;
}
#navbar a:hover {
background-color: #003300;
color: gold;
}
#navbar a:visited {
color: black;
}
a:active {
background-color: #003300;
color: gold;
}
HTML:
<div id="navbar">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>NEWS</li>
<li>READING</li>
<li>STORE</li>
<li>CONTACT</li>
</ul>
</div>
Here's a screenshot for reference: (home has my cursor over)
Cheers

Answer 1

here's a quick example for you:
http://jsfiddle.net/DFS5P/

Answer 2

You then should move some of the li css to the a css - like so
#navbar ul li {
height: 50px;
width: auto;
float: left;
}
#navbar ul li a {
display: block;
height: 100%;
padding-left: 20px;
padding-right: 20px;
line-height: 50px;
border-right: 1px solid black;
}

Answer 3

Give your padding & height to anchor instead of LI. Write like this:
#navbar ul li {
float: left;
border-right: 1px solid black;
}
#navbar ul li a {
display: block;
padding-left: 20px;
padding-right: 20px;
line-height: 50px;
height: 50px;
}
Check this http://jsfiddle.net/DFS5P/1/

Answer 4

Try adding
width:100%;
to:
#navbar ul li a {
display: block;
height: 100%;
}

Answer 5

If you remove the padding from the list items and give them a fixed width, it works as you need.
#navbar ul li {
height: 50px;
width: 100px;
float: left;
line-height: 50px;
border-right: 1px solid black;
}
jsFiddle example

Answer 6

It is definately not the best way, but sometimes I just move the entire 'li' inside the 'a' tag. This way everything witin the 'li' goes to the link in when you click on it.
Works fine by me, but as I said it is not the best way.