<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.

css" r
el="stylesheet">
<div class="mainmenu">
<ul>
<li><i class="icon-home icon-large"></i>&nbsp;<main>Home</main><desc>sweet h
ome ...</desc></li>
<li><i class="icon-comments icon-large"></i>&nbsp;<main>Blog</main><desc>Wha
t they say</desc></li>
<li><i class="icon-tint icon-large"></i>&nbsp;<main>Contact</main><desc>drop
a line ...</desc></li>
</ul>
</div>
CSS 3
@import url(http://fonts.googleapis.com/css?family=Cuprum:400,700);
body { padding: 0px; margin: 0px; background: #000811; }
.mainmenu { color: #ccc; font-size: 16px; font-family: 'Cuprum', Georgia, "Times
New Roman", Times, Serif; background: #002244; width: 100%; height: 51px; borde
r: 1px solid #026; border-bottom: 3px solid #012; text-shadow: 0 1px 0 #000;}
.mainmenu ul {margin: 0; padding: 0; }
.mainmenu li i { position: absolute; margin-left: -35px; margin-top: 6px; color:
#012; text-shadow: 0 1px 0 #036;}
.mainmenu li { float: left; display: block; padding: 10px 10px 10px 50px; border
-right: 1px solid #012; cursor: pointer; min-width: 100px; max-width: 100px; }
.mainmenu li:hover { background: #012; }
.mainmenu li:hover i {color: #036; text-shadow: 0 1px 0 #000;}
.mainmenu li main {font-weight: 700; margin-top: -18px; }
.mainmenu li desc { position: relative; float: left; font-size: 11px; color: #88
8; }
.mainmenu li, .mainmenu li i, .mainmenu li main, .mainmenu li desc {
-moz-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;}
.mainmenu li:hover main { margin-left: 10px;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;}
.mainmenu li:hover desc { margin-left: 30px;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;}