Menú con problema de selección en secciones A, B, C y D

#templatemo_menu_wrapper {
	width: 100%;
	height: 50px;
    background: url(../images/templatemo_menu_wrapper.jpg) repeat-x;
}

#templatemo_menu {
	width: 920px;
	height: 50px;
	margin: 0 auto;
	padding: 0 30px;
	background: url(../images/templatemo_menu.jpg) no-repeat;
}

#templatemo_menu ul {
	margin: 0px;
	padding: 0px;
	list-style: none;
}

#templatemo_menu ul li{
	padding: 0px;
	margin: 0px;
	display: inline;
}

#templatemo_menu ul li a{
	float: left;
	display: block;
	width: 124px;
	height: 38px;
	padding: 12px 0 0 0;
	margin-right: 1px;
	text-align: center;
	font-size: 16px;
	text-decoration: none;
	color: #d8d3bd;	
	font-weight: normal;
	outline: none;
}

#templatemo_menu li a:hover, #templatemo_menu li .current{
	color: #fff;
	background: #2E64FE;
}

<ul>
    <li><a href="#a">Sección A</a></li>
    <li><a href="#b" class="current">Sección B</a></li>
    <li><a href="#c">Sección C</a></li>
    <li><a href="#d">Sección D</a></li>
</ul>