SO fiddle

Test Fiddle mainly for SO Questions

by Nick Craver

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/overcast/jquery-ui.css">
<nav>
    <a id="cpanel" href="#">Cpanel Login</a>
    <ul>
      <li><a id="nav-1" href="#" style="opacity: 0.4; ">Home</a></li>
      <li><a id="nav-2" href="#" style="opacity: 0.4; ">About Us</a></li>
      <li><a id="nav-3" href="#" style="opacity: 0.4; ">Client Login</a></li>
      <li><a id="nav-4" href="#" style="opacity: 0.4; ">Contact Us</a></li>
      <li><a id="nav-5" href="#" style="opacity: 0.4; ">Support</a></li>
    </ul>
  </nav>

CSS

nav ul {  position: relative; z-index: 1000;  margin: -26px 0 0 11px; overflow: hidden; }
nav ul li { display: inline; }
nav ul li a { background: url(http://elektrikhost.com/images/nav-sprite.png); display: block; float: left; text-indent: -999px; margin: 0 auto; width: 667px; }    
nav ul a#nav-1 { background-position: 0 0;  height: 48px; width: 103px; }
nav ul a#nav-2 { background-position: -103px 0;  height: 48px; width: 129px; }
nav ul a#nav-3 { background-position: -234px 0;  height: 48px; width: 156px; }
nav ul a#nav-4 { background-position: -392px 0;  height: 48px; width: 147px; }
nav ul a#nav-5 { background-position: -541px 0;  height: 48px; width: 124px; }
nav ul a#nav-1:hover { background-position: 0 48px; }
nav ul a#nav-2:hover { background-position: -103px 48px; }
nav ul a#nav-3:hover { background-position: -234px 48px; }
nav ul a#nav-4:hover { background-position: -392px 48px; }
nav ul a#nav-5:hover { background-position: -541px 48px; }

/* -- Cpanel Button -- */

nav a#cpanel { background: url("http://elektrikhost.com/images/cpanel.png") no-repeat; display: block; height: 42px; left: 576px; position: relative; 

text-indent: -9999px; top: -6px; width: 109px; z-index: 1; }

JavaScript

$("nav ul a").hover(function(){
  $(this).stop().fadeTo(300, 0.9);
}, function(){
    $(this).stop().fadeTo(300, 0.7);
}).fadeTo(0, 0.7);