list background not changing in CSS in hover

list background not changing in CSS in hover

hover on first element of list changes the whole background to some other
colour. but hover other element except first changes background also but
some portion of background is left unchanged there as you can see in
picture.

HTML:
<div id="add_friend">
<ul id="frnd_bar_2">
<li>Add To Friends</li>
<li>About</li>
<li>Photos</li>
<li>Friends</li>
</ul>
</div>
CSS:
#frnd_bar_2{
position:relative;
list-style: none;
text-decoration: none;
display: inline-block;
border: 1px solid grey;
border-left: 2px solid grey;
margin: 0px;
padding: 0px;
}
#frnd_bar_2 li{
cursor:pointer;
list-style: none;
text-decoration: none;
display: inline-block;
border-right: 2px solid grey;
text-align:center;
margin: 0px auto;
padding: 5px;
padding-left: 30px;
padding-right: 30px;
font: 20px sans-serif ;
}
#frnd_bar_2 li:hover {
background: #aaa;
margin: 0px auto;
}
#add_friend{
float:left;
height:auto;
background:#efefef;
margin: 0px;
padding: 0px;
}
is there any problem in the code?