<style>

ul:after { content:""; display:block; width:100%; height:0; visibility:hidden; clear:both; }  
li { list-style-type:none; float:left; position:relative; }  
.hover-css a, .hover-anims a, .hover-anims a span { display:block; height:0; padding-top:51px; position:relative; overflow:hidden; background:url(/imsges/menu.png) no-repeat 0 0; color:transparent; }  
.hover-anims a span { position:absolute; left:0; top:0; }  
.hover-css .one a, .hover-anims .one a, .hover-anims .one a span { width:113px; }  
.hover-css .one a:hover, .hover-anims .one span { background-position:0 -51px; }  
.hover-css .two a, .hover-anims .two a { width:107px; background-position:-113px 0; }  
.hover-css .two a:hover, .hover-anims .two span { width:107px; background-position:-113px -51px; }  
.hover-css .three a, .hover-anims .three a { width:130px; background-position:-220px 0; }  
.hover-css .three a:hover, .hover-anims .three span { width:130px; background-position:-220px -51px; }  
.hover-css .four a, .hover-anims .four a { width:124px; background-position:-350px 0; }  
.hover-css .four a:hover, .hover-anims .four span { width:124px; background-position:-350px -51px; }  
.hover-css .five a, .hover-anims .five a { width:113px; background-position:-474px 0; }
.hover-css .five a:hover, .hover-anims .five span { width:113px; background-position:-474px -51px; }
.hover-anims a span.other { display:inline; width:auto; height:auto; padding:0; position:absolute; left:auto; right:5px; top:2px; z-index:10; font:10px Arial; color:red; background:none; }  
</style>

<script src="/css/jquery.hoverfade-1.0.2.js"></script>
  <script>
  $("#nav-2").hoverFade();  
  </script>

<ul class="hover-css" id="nav-2">
<li class="one"><a title="One" href="#">One</a></li>
<li class="two"><a title="Two" href="#">Two</a></li>
<li class="three"><a title="Three" href="#">Three</a></li>
<li class="four"><a title="Four" href="#">Four</a></li>
<li class="five"><a title="Five" href="#">Five</a></li>
</ul>