html,body {margin:0;padding:0;}
body {color:#000;font-family:Arial, Helvetica, sans-serif;font-size:1em;}
h2 {margin-top:50px;font-family: 'Ubuntu', sans-serif;border-bottom:1px solid #ccc;font-weight:normal;}
::-moz-selection {background: #aaa;}
::selection {background: #aaa;}

@media screen {
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: normal;
  src: local('Ubuntu'), url('http://themes.googleusercontent.com/static/fonts/ubuntu/v3/_xyN3apAT_yRRDeqB3sPRg.woff') format('woff');
}
}

#top {width:100%;height:30px;background-color:#2D2D2D;border-bottom:1px solid #D2D2D2;}
#top a, #top a:hover {text-decoration:none;color:#ddd;}

ul {list-style: none;margin:0;padding:0;}
ul#main {margin-left:5px;color:#fff;float:left;}
ul#main li {float:left;padding-top:5px;}
ul#main li a{font-size:0.8em;padding:7px 8px;}
ul#main li .active {border-top:2px solid red;padding-top:5px;font-weight:bold;color:#fff;}
ul#main li a:hover {background-color:#4C4C4C;cursor:pointer;}

ul#right, ul#middle {color:#fff;float:right;}
ul#right li, ul#middle li{float:right;padding-top:5px;}
ul#right li a, ul#middle li a{padding:7px 8px;font-size:0.8em;}
ul#right li a:hover, ul#middle li a:hover {background-color:#4C4C4C;cursor:pointer;}
ul li.divider {background:url('http://dl.dropbox.com/u/1621719/demo/JSFiddle/divider.gif')no-repeat;width:1px;height:29px;}
#numbers {height:22px;position:relative;background-color:red;border-radius:3px;}
ul#numbers {float:right;}
ul#numbers li {border-radius:2px;font-size:11px;}

#counter {
  margin:4px 5px;
  float:right;
  border-radius:5px;
  height:22px;width:23px;
  overflow:hidden;
  background-color:#555;
  color:#fff !important;
  cursor:pointer;
}
#zero {color:#999;background-color:#777 !important;}
.number {
  padding: 5px 1px 5px 0;
  font-weight:bold;
  text-align:center;
  float:left;
  width:22px;
  position:relative;
}

    $(function(){
    $("#counter").mouseenter(function(){
        $(".number").animate({"top": "-=22px"}, "fast");
    });
});

<div id="top">

  <ul id="main">
    <li><a href="http://gplus.to/allusis" target="_blank" class="active">+Ripoff</a></li>
    <li><a href="http://allusis.net" target="_blank">Allusis</a></li>
    <li><a href="http://twitter.com/#!/tonymontemorano" target="_blank">Twitter</a></li>
    <li><a href="http://allusis.tumblr.com/" target="_blank">Tumblr</a></li>
    <li><a href="http://about.me/tonymontemorano" target="_blank">About</a></li>
  </ul>

  <ul id="right">
    <li class="divider"></li>
    <li style="padding:2px 5px 0 5px;"><img src="http://dl.dropbox.com/u/1621719/demo/JSFiddle/05.jpg"></li>
    <li class="divider"></li>
    <li><a href="#">Share</a></li>
    <li class="divider"></li>
  </ul>

  <div id="counter">
    <ul id="numbers">
      <li class="number" id="zero">0</li>
      <li class="number" id="1">1</li>
      <li class="number" id="2">2</li>
      <li class="number" id="3">3</li>
      <li class="number" id="4">4</li>
      <li class="number" id="5">5</li>
      <li class="number" id="6">6</li>
      <li class="number" id="7">7</li>
      <li class="number" id="8">8</li>
      <li class="number" id="9">9</li>
      <li class="number" id="10">10</li>
      <li class="number" id="11">11</li>
      <li class="number" id="12">12</li>
      <li class="number" id="13">13</li>
      <li class="number" id="14">14</li>
      <li class="number" id="15">15</li>
      <li class="number" id="16">16</li>
      <li class="number" id="17">W</li>
      <li class="number" id="18">T</li>
      <li class="number" id="19">F</li>
      <li class="number" id="20">20</li>
    </ul>
  </div>

  <ul id="middle">
    <li class="divider"></li>
    <li><a href="#">tony@allusis.net</a></li>
  </ul>

</div>