Remove background colour from <li> so hover effect works

**** The javascript that sets the background color ****
// Highlight the nav item being viewed
function setNavItem(item) {
    // Set the background color of the selected item
    document.getElementById(item).style.backgroundColor = '#dbf0b0';
    alert(document.getElementById(item).className);
    if (currentNavItem != '') {
        // Clear the previous nav item
        document.getElementById(currentNavItem).style.backgroundColor = 'transparent';
        }
    // Set currentNavItem to the selected item
    currentNavItem = item;
    }
 
**** The List ****
<div id="lhsInner2" class="leftBoxInner"> <img src="images/left-box-inner-img.png" alt="Left image" height="18" width="287" />
            <ul>
              <li><a id="T2_The_Lucky_Few" href="T2_Success_With_MiLife.aspx?page=T2_The_Lucky_Few">the 'lucky' few?</a></li>
              <li><a id="T2_Why_Try_Again" href="T2_Success_With_MiLife.aspx?page=T2_Why_Try_Again">so, why try again?</a></li>
              <li><a id="T2_Personal_Solutions" href="T2_Success_With_MiLife.aspx?page=T2_Personal_Solutions">we need personal solutions...</a></li>
              <li><a id="T2_Personalisation" href="T2_Success_With_MiLife.aspx?page=T2_Personalisation">the difference is personalisation...</a></li>
            </ul>
          </div>
 
**** The CSS ****
.leftBoxInner {
	width: 287px;
	overflow: hidden;
	background: url(../images/left-box-inner-bg.png) bottom repeat-x;
	margin: 0px 0px 0px 1px;
	}
	
.leftBoxInner ul {
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 9px;
	list-style: none;
	}
	
.leftBoxInner ul li {
	color: #93c83a;
	font-size: 75%;
	width: 266px;
	}
	
.leftBoxInner ul li a {
	color: #858484;
	text-decoration: none;
	display: block;
	padding: 3px 0px 3px 20px;
	background: url(../images/left-box-green-bullet.gif) no-repeat left;
	}