<script type="text/javascript" src="https://forumstatic.ru/files/0011/88/07/14392.js"></script>
<script>
$(document).ready(function() {
 $("ul#nav li a").addClass("js");
 $("ul#nav li a").hover(
      function () {
        $(this).stop(true,true).animate({backgroundPosition:"(0 0)"}, 200);
        $(this).animate({backgroundPosition:"(0 -5px)"}, 150);
      },
      function () {
        $(this).animate({backgroundPosition:"(0 -149px)"}, 200);

      }
    );

});
</script>

<style type="text/css">
#container {
 height: 175px;
 background: url(http://uploads.ru/i/Q/N/5/QN5S3.jpg) center top no-repeat;
}
ul#nav {
 width: 700px; margin: 0 auto; text-align: center; overflow: hidden;
}
 ul#nav li {
  float: left; list-style: none;
 }
  ul#nav li a {
   display: block; width: 97px; height: 77px;
   padding: 72px 0 0 0; margin: 0 32px 0 32px;
   font: bold 16px Helvetica, Arial, Sans-Serif; text-transform: uppercase;
   color: #9c5959; text-shadow: 0 1px 3px #c4bda6; text-decoration: none;

   background: url(http://uploads.ru/i/U/O/z/UOzRI.png) 0 -149px no-repeat;
  }
   ul#nav li a:hover {
    background: url(http://uploads.ru/i/U/O/z/UOzRI.png) 0 0 no-repeat;
    color: #eee9d9; text-shadow: 0 2px 3px #4c2222;
   }

   ul#nav li a.js:hover {
    background: url(http://uploads.ru/i/U/O/z/UOzRI.png) 0 -149px no-repeat;
   }
</style>
<div id="container">
 <ul id="nav">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Work</a></li>
  <li><a href="#">Contact</a></li>
 </ul>
</div>