css: block link not fitting correctly - css

Question

I'm trying to create a navigation bar. What I want is when I hover to the block item it changes the background. My problem is the block is a little bigger than the link, so if I move the mouse outside the link area I can't click on it.
This is the jsfiddle I created, I changed the background color of the link when hovering over for a better visual aid
http://jsfiddle.net/Tx8MK/3/
so how can I make the link block fit the list block.
Thank you
#navBar li{
float:left;
display:block;
text-align:center;
position:relative;
padding: 4px 10px 4px 10px;
margin-right:30px;
border:none;
}
#navBar li:hover{
border: 1px solid #777777;
border-bottom:none;
padding: 3px 9px 4px 9px;
/* Background color and gradients */
background: #F4F4F4;
background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));
/* Rounded corners */
-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;
}
#navBar li a{
font-family:Arial, Helvetica, sans-serif;
font-size:18px;
color: #EEEEEE;
display:block;
outline:0;
text-decoration:none;
text-shadow: 1px 1px 1px #000;
padding: 0 25px;
}
#navBar li a:hover{
text-decoration: none;
color:#000;
display:block;
padding: 0 25px;
background:#fff;
}

Answer 1

Instead of giving the padding to the list items, give it to the anchors. Updated fiddle below:
#navBar li a{
font-family:Arial, Helvetica, sans-serif;
padding: 4px 10px 4px 10px;
-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;
...
}
http://jsfiddle.net/hQJye/

Answer 2

The problem was your padding applied to your LI. Removing that made the <a> fill your LI.
http://jsfiddle.net/Tx8MK/5/
html, body {
margin: 0;
padding: 0;
}
body {
font: 13px/22px Helvetica, Arial, sans-serif;
background: #f0f0f0;
}
nav {
position:absolute;
top:0;
width:100%;
background: #000;
color: #fff;
list-style: none;
}
nav section{
margin:10px 20px;
}
#navBar li{
float:left;
display:block;
text-align:center;
position:relative;
margin-right:30px;
border:none;
}
#navBar li:hover{
border: 1px solid #777777;
border-bottom:none;
/* Background color and gradients */
background: #F4F4F4;
background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));
/* Rounded corners */
-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;
}
#navBar li a{
font-family:Arial, Helvetica, sans-serif;
font-size:18px;
color: #EEEEEE;
display:block;
outline:0;
text-decoration:none;
text-shadow: 1px 1px 1px #000;
padding: 0 25px;
}
#navBar li a:hover{
text-decoration: none;
display:block;
color:#000;
background:#ff0000;
}