css ul li :hoover want to change background color. But see part of previous background color or li expands - css

Question

Here is example http://jsfiddle.net/x9ghnf99/7/
Have ul li menu
<div class="nav" id="nav1">
<ul>
<li>Home</li>
</ul>
</div>
Set initial background color for li. Also set some padding from text (a) to "borders" of li. And also want to create rounded corners
#nav1 ul li {
display: inline;
background-color: #dddddd;
padding: 5px 5px 5px 5px;
border-radius:5px 5px 0px 0px;
}
On hoover want to change/replace color, for example to green, so as green fills whole li
With this http://jsfiddle.net/psxvy320/
#nav1 ul li :hover{
background-color: green;
}
green is only around text (a) and for other part of li i see previous background.
Tried http://jsfiddle.net/psxvy320/1/
#nav1 ul li :hover{
background-color: green;
padding: 5px 5px 5px 5px;
}
See part of previous background and li expands to left and right.
I want to see li the same widht/height, want only to change background, like here http://jsfiddle.net/psxvy320/4/ (below menu)
What need to change/add to the code?

Answer 1

There is a space between li and :hover in your code.
It should be .nav ul li:hover. When you add a space li :hover, it adds the hover effect to the child element (in this case, to the <a>)
Fiddle1: http://jsfiddle.net/psxvy320/5/
Fiddle2: http://jsfiddle.net/x9ghnf99/10/

Answer 2

Add the padding for a instead of li so that the whole item will be clickable. and change li display to inline-block
#nav1 ul li a{
padding: 5px 5px 5px 5px;
border-radius:5px 5px 0px 0px;
display: block;
}
.nav ul li {
display: inline-block;
}
http://jsfiddle.net/afelixj/x9ghnf99/11/