CSS: How to make background color around text not flush to the text?

Problem :

I am new to CSS and website design. See the menu on the left on this page: When you hover over a menu element the background around the text becomes white but I would like the entire row and a little bit over and under the text to become white too, similar to the top menus. Here's the code I have:

.child-sidebar-menu
{
    background-color: #DEDEDE;
}

.advanced-sidebar-menu ul li a{

text-decoration: none;
color: black;
border-bottom: 0px;
}

.advanced-sidebar-menu ul li a:hover{
text-decoration: none;
border-bottom: 0px;
}

.advanced-sidebar-menu li > ul li a:hover
 {
   color: black;
background-color: white;
 }

.advanced-sidebar-menu ul ul li a{
font-weight: normal;
font-size: 100%;
border-bottom: 0px;
}

.advanced-sidebar-menu ul{
margin: 0 0 0 0px;
list-style: none;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
border-bottom: 0px;
line-height: 200%;
}

.advanced-sidebar-menu ul li{
    list-style:none;
    list-style-type: none;
border-bottom: 0px;


}

.advanced-sidebar-menu li.current_page_item{

    list-style-type: none;
border-bottom: 0px;
}

.advanced-sidebar-menu li.current_page_item a{
    font-weight: bold;
border-bottom: 0px;
}

Any easy way to do this? Does it have to do with border and margin?

Thank you.

Solution :

Check this JSFiddle : http://jsfiddle.net/D5sdT/

The key points are :

1. Make <a> tag display : block. This will allow <a> to occupy complete horizontal space as li
2. Remove padding and margin from <li>. Instead give the same to <a>.