.navigation{
position:relative;
margin:0 auto;
width:915px;
}
ul.menu{
list-style:none;
font-family:"Verdana",sans-serif;
border-top:1px solid #bebebe;
margin:0px;
padding:0px;
float:left;
}
ul.menu li{
float:left;
}
ul.menu li a{
text-decoration:none;
background:#7E7E7E url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAGRWAp9usoAbp_zeyozeLRUR2kHbFlRepgaYyVp72MASI0QLRMp09TuJHSGvIw9MBnZufkedpRKB0fDcoSM6xMk4xHiuJiwimYZS0T75ows97t5BKtdWDYQt96kaBGLrEkQSi_tIcxJIq/s400/bgMenu.png) repeat-x top left;
padding:15px 0px;
width:128px;
color:#333333;
float:left;
text-align:center;
border-right:1px solid #a1a1a1;
border-left:1px solid #e8e8e8;
font-weight:bold;
font-size:13px;
-moz-box-shadow: 0 1px 3px #555;
-webkit-box-shadow: 0 1px 3px #555;
text-shadow: 0 1px 1px #fff;
}
ul.menu li a.hover{
background-image:none;
color:#fff;
text-shadow: 0 -1px 1px #000;
}
ul.menu li a.first{
-moz-border-radius:0px 0px 0px 10px;
-webkit-border-bottom-left-radius: 10px;
border-left:none;
}
ul.menu li a.last{
-moz-border-radius:0px 0px 10px 0px;
-webkit-border-bottom-right-radius: 10px;
}
ul.menu li span{
width:64px;
height:64px;
background-repeat:no-repeat;
background-color:transparent;
position:absolute;
z-index:-1;
top:80px;
cursor:pointer;
}
ul.menu li span.ipod{
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-SZ4csyz69Di7VQE2qlg3Z8otifn9DRsaLf3ZT1F1gVu6fL5XsYmk6fcsbrvOHKGmdift4j02HLe27DbnbiHjsyOXWLvFX6Tu747krzLiY2BXMj5nNfm8IFYzwXCeXV28Qy127q-2TOYu/s400/ipod.png);
left:33px; /*128/2 - 32(half of icon) +1 of border*/
}
ul.menu li span.video_camera{
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi3uAB5wt1UHsC_viEgWvOai7jHaeWuLtw_XWlq1qVJ_3kyojQYViQRbgwRQ5_bV9hH-1uhg09WHOak4BocBfZIMJT00sYWXQInvaMDu5ewqmW4tL0O7TFMFcaLj97toojtAiFixNmXBaI/s400/video_camera.png);
left:163px; /* plus 128 + 2px of border*/
}
ul.menu li span.television{
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB-0rP8DjPLddctbL2X83yWKTbeF0m9Pst3RzE-p2qT9G4W8T6Czax6_8oJVI5iMMbetKU10ZtvRMxjy5zosQcUQGKSwi0ZDnNZee19Svzw_MsQ6FUvI92z2h6jAlSalabYL2leXCz0sjU/s400/television.png);
left:293px;
}
ul.menu li span.monitor{
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdiMqzF1rZMAG0ePHZRGvjdlfuMaKRH_4p3p9YWvGyBa6XPJL39ANOqCDHnRxa4Ymb-zDlmVasz9SxNckqbdweHLCMuIl8VxwSLsJwxiacan5E2OxEcvhNLTvFPI7s6mRkWyHxIp7Y7vyT/s400/monitor.png);
left:423px;
}
ul.menu li span.toolbox{
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2t9BCHLvC86anfB5h9MWmraZ9dJNp1vEOsMO3mARuVClxgsEuFfmOKW8hZSvbyylUlZ-gelOi9bGiuxsrIcul8cj6v9jFh59pF16TZCRzNZ-VUSRMvvtPnSGVgpiMIYCMWPc5JLQNc4rh/s400/toolbox.png);
left:553px;
}
ul.menu li span.telephone{
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPji_jgYtoblUEoNn2FSgZz0NqEku390LlqJ11OF72J4JvFS5zr8I8yLpi4pTdKrKARn9tHNF-dz8tqWtTajJPkPHvkvqlqyw4Z85P_GDxWA1lGq4LnTH-cpCORhHOOI7qkicT-_c3wYGJ/s400/telephone.png);
left:683px;
}
ul.menu li span.print{
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6Cz-lSIDBXWnSZSAkcMf4c5YHcBJ7YZ2W3PyiLlgpYcHB6OvVjsZgh46uQx5FqnKoHU8i9SMUohVWNsG_0Eo5sccdM1JqJydhNr4bUbO9pHZ_R08FgKiXRq9UhIxTBYErf1u7UNrBqHwR/s400/print.png);
left:813px;
}

<script type="text/javascript" src="http://filiex.googlecode.com/files/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(function() {
var d=1000;
$('#menu span').each(function(){
$(this).stop().animate({
'top':'-17px'
},d+=250);
});

$('#menu > li').hover(
function () {
var $this = $(this);
$('a',$this).addClass('hover');
$('span',$this).stop().animate({
'top':'40px'
},300).css({
'zIndex':'10'
});
},
function () {
var $this = $(this);
$('a',$this).removeClass('hover');
$('span',$this).stop().animate({
'top':'-17px'
},800).css({
'zIndex':'-1'
});
}
);
});
</script>

<div class="navigation">
<ul class="menu" id="menu">
<li><span class="ipod"></span><a href="URL" class="first">Players</a></li>
<li><span class="video_camera"></span><a href="URL">Cameras</a></li>
<li><span class="television"></span><a href="URL">TVs</a></li>
<li><span class="monitor"></span><a href="URL">Screens</a></li>
<li><span class="toolbox"></span><a href="URL">Tools</a></li>
<li><span class="telephone"></span><a href="URL">Phones</a></li>
<li><span class="print"></span><a href="URL" class="last">Printers</a></li>
</ul>
</div>