<div id="menu">  <ul id="nav">   <li>   <a href="ВАША ССЫЛКА" class="icon1">   <span>Главная</span>   </a>   </li>   <li>   <a href="ВАША ССЫЛКА" class="icon2">   <span>Портфолио</span>   </a>   </li>   <li>   <a href="ВАША ССЫЛКА" class="icon3">   <span>Мой блог</span>   </a>   </li>   <li>   <a href="ВАША ССЫЛКА" class="icon4">   <span>Сервис</span>   </a>   </li>  </ul>  </div>

/*======== Horizontal menu =========*/   #menu {  width: 100%;  background: #a7cfdf; /* Old browsers */  background: -moz-radial-gradient(center, ellipse cover, #a7cfdf 0%, #23538a 100%); /* FF3.6+ */  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#a7cfdf), color-stop(100%,#23538a)); /* Chrome,Safari4+ */  background: -webkit-radial-gradient(center, ellipse cover, #a7cfdf 0%,#23538a 100%); /* Chrome10+,Safari5.1+ */  background: -o-radial-gradient(center, ellipse cover, #a7cfdf 0%,#23538a 100%); /* Opera 12+ */  background: -ms-radial-gradient(center, ellipse cover, #a7cfdf 0%,#23538a 100%); /* IE10+ */  background: radial-gradient(center, ellipse cover, #a7cfdf 0%,#23538a 100%); /* W3C */  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a7cfdf', endColorstr='#23538a',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */  position: relative;  margin-top: 100px;  border-top: 4px solid #eee;  border-bottom: 4px solid #FFF;  overflow: hidden;  }    #nav {  z-index: 99999;  margin:0;  padding:0;  }     #nav li a,#nav li {  float:left;  }     #nav li {  list-style:none;  position:relative;  }     #nav li a {  padding: 0 10px;  width: 130px;  height: 102px;  text-decoration:none;  margin:0;  font-size:12px;  font-weight:400;  text-transform:uppercase;  text-align: center;  color:#FFF;  }     #nav li a.icon1 {  background: url(http://mega.ucoz.ua/demo/menuSurprise/11.png) no-repeat center 0;  }  #nav li a.icon2 {  background: url(http://mega.ucoz.ua/demo/menuSurprise/22.png) no-repeat center 0;  }  #nav li a.icon3 {  background: url(http://mega.ucoz.ua/demo/menuSurprise/33.png) no-repeat center 0;  }  #nav li a.icon4 {  background: url(http://mega.ucoz.ua/demo/menuSurprise/44.png) no-repeat center 0;  }     #nav li a span{  position: absolute;  top: 70px;  left:0;  right: 0;  font-size: 17px;  color:#cfcfcf;  }     #nav li a:hover span{  color:#fff;  }  /*======== Horizontal menu =========*/

<script type="text/javascript" src="http://mega.ucoz.ua/demo/menuSurprise/js/jquery.backgroundPosition.js"></script>  <script type="text/javascript" src="http://mega.ucoz.ua/demo/menuSurprise/js/jquery.easing.1.3.js"></script>  <script type="text/javascript">  $(function(){   $('#nav li a')   .css( {backgroundPosition: "52px -240px"} )   .mouseover(function(){   $(this).stop().animate({backgroundPosition:"(52px 10px)"}, {duration:1500, easing : 'easeOutElastic'})   })   .mouseout(function(){   $(this).stop().animate({backgroundPosition:"(52px -240px)"}, {duration:500, easing : 'easeOutCubic', complete:function(){   $(this).css({backgroundPosition: "52px -240px"})   }})   })     });  </script>