Горизонтальное меню с круглыми иконками

<div id="menu4">
<ul>
<li class="k84">
<a href="/">
<span class="title"><img src="http://uwebik.ru/css/glavnaja_menju.png"/></span>
<span class="text">Главная</span>
</a>
</li>
<li class="k84"><a href="">
<span class="title"><img src="http://uwebik.ru/css/katalog_fajlov.png"/></span>
<span class="text">файлы</span>
</a>
</li>
<li class="k84"><a href="">
<span class="title"><img src="http://uwebik.ru/css/news.png"/></span>
<span class="text">Новости</span>
</a>
</li>
<li class="k84"><a href="">
<span class="title"><img src="http://uwebik.ru/css/games.png"/></span>
<span class="text">Игры</span>
</a>
</li>
<li class="k84"><a href="">
<span class="title"><img src="http://uwebik.ru/css/forum.png"/></span>
<span class="text">Форум</span>
</a>
</li>
</ul>

#menu4 ul {
list-style:none;

}
#menu4 ul li{
margin-left:20px;
float: left;

}
#menu4 ul li a{
text-decoration:none;
}
#menu4 ul li a span{
display:block;
}

#menu4 ul li a:hover span.title{
color:#00adef;
}
#menu4 ul li a span.text{
padding:0px 20px;
font-family: Georgia, serif;
font-size: 25px;
font-style: italic;
font-weight: normal;
letter-spacing: normal;
line-height: 1.6em;
color:#000;
visibility:hidden;
}
#menu4 ul li a:hover span.text{
visibility:visible;
}

.k84 {font-weight:bold;
cursor:pointer;
opacity:0.7;
background:#fff;
border-radius:10px;
-moz-border-radius: 10px;
-webkit-border-radius:10px;
border:0px solid #000;
}
.k84:hover {font-size:30px;
font-weight:bold;
cursor:pointer;
opacity:1;
background:#fff;
border-radius:10px;
-moz-border-radius: 10px;
-webkit-border-radius:10px;
border:10px solid #fff;
}