CSS poziome menu z ikonami, problem z efektem hover

Hej, witam serdecznie. Tworzę pewien prosty szablon strony, mój projekt jest praktycznie gotowy, jednak chciałbym poprawić menu. Otóż mam problem, ponieważ nie wiem w jaki sposób mógłbym uzyskać taki o to efekt:

Po najechaniu na pozycje podświetla się na niebiesko w bloku, razem z ikoną.

W moim menu niestety podświetla się tylko link, a chciałbym uzyskać taki efekt jak wyżej.

Tak wygląda kod HTML dla mojego menu:

<nav id="mainmenu">
	<ul>
		<li><a href="#"><span class="ico-home"></span>Home</a></li>
		<li><a href="#"><span class="ico-blog"></span>Blog</a></li>
		<li><a href="#"><span class="ico-portfolio"></span>Portfolio</a></li>
		<li><a href="#"><span class="ico-page"></span>Pages</a></li>
		<li><a href="#"><span class="ico-forum"></span>Forum</a></li>
		<li><a href="#"><span class="ico-contact"></span>Contact</a></li>
	</ul>
</nav><!--/mainmenu-->

Tutaj kod CSS:

#mainmenu {
	width: 560px;
	height: 90px;
	margin: 0 20px 0 0;
}

#mainmenu li {
	font-family: Open Sans Condensed;
	font-size: 18px;
	list-style-type: none;
	text-shadow: 1px 1px #000;
	text-align: center;
	display: inline-block;
	margin: 35px 10px 0 0;
	padding: 10px 10px 0 20px;
}

#mainmenu ul li a {
	color: #f1f1f1;
}

#mainmenu ul li a:hover {
	color: #ff4b64;
}

tak na szybko:

#mainmenu li {
    font-family: Open Sans Condensed;
    font-size: 18px;
    list-style-type: none;
    text-shadow: 1px 1px #000;
    text-align: center;
    display: inline-block;
    margin: 35px 10px 0 0;
}
 
#mainmenu ul li {
    padding: 10px 10px 10 20px;
    color: #f1f1f1;
}
 
#mainmenu ul li a:hover {
    color: #ff4b64;
}
#mainmenu ul li:hover {
    background-color: #eee;
}

Dziękuję za te małe poprawki, efekt jest taki jaki chciałem uzyskać, jednak jest jedna mała rzecz, którą chciałbym jeszcze poprawić. Po najechaniu na napis-link pojawia się łapka, jednak po najechaniu na krawędź jest tylko zwykły kursor, a chciałbym żeby było to klikalne w obrębie napisu. To tyle, można zobaczyć jak to wygląda na zrzucie.

#mainmenu ul li { } /*do wywalenia*/

#mainmenu ul li a {
    padding: 10px 10px 10 20px;
    color: #ff4b64;
}
 
#mainmenu ul li a:hover {
    color: #ff4b64;
    background-color: #eee;
}

ewentualnie trzeba dać dla "a" display:block, nie mam czasu sprawdzić.

Super, bardzo dziękuję za pomoc, działa tak jak chciałem.

Innym wyjściem jest zamienić <a> z <li>.