css ul li：胡佛希望改变背景颜色。但请参阅之前背景颜色的一部分或li扩展

Question

以下是示例http://jsfiddle.net/x9ghnf99/7/

有ul li菜单

<div class="nav" id="nav1">
<ul>
<li><a href="#">Home</a></li>
</ul>
</div>

设置li的初始背景颜色。还可以从文本（a）到＆＃34;边框＆＃34;设置一些填充。 li。并且还想创建圆角

#nav1 ul li {
display: inline;
background-color: #dddddd;
padding: 5px 5px 5px 5px;
border-radius:5px 5px 0px 0px;
}

在胡佛想要更改/替换颜色，例如绿色，以便绿色填充整个li

使用此http://jsfiddle.net/psxvy320/

#nav1 ul li  :hover{
background-color: green;
}

绿色仅在文字（a）周围，而li的其他部分我看到以前的背景。

尝试http://jsfiddle.net/psxvy320/1/

#nav1 ul li  :hover{
background-color: green;
padding: 5px 5px 5px 5px;    
}

查看之前背景的一部分，li向左和向右展开。

我希望看到li相同的widht / height，只想更改背景，例如http://jsfiddle.net/psxvy320/4/（在菜单下方）

需要更改/添加代码的内容是什么？

Answer 1

代码中的li和:hover之间有一个空格。 它应该是.nav ul li:hover。当您添加空格li :hover时，它会将悬停效果添加到子元素（在本例中为<a>）

小提琴1：http://jsfiddle.net/psxvy320/5/ 小提琴2：http://jsfiddle.net/x9ghnf99/10/

Answer 2

添加a的填充而不是li，以便整个项目可以点击。并将li显示更改为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/