JSFiddle - React, Tailwind, and code Playground

by karinafoto

HTML

<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js" type="text/javascript">
  </script>
  <script type="text/javascript">
  $(function() {
  var d=800;
  $('#navigation a').each(function(){
  $(this).stop().animate({
  'marginTop':'-80px'
  },d+=150);
  });
  
 
  $('#navigation > li').hover(
  function () {
  $('a',$(this)).stop().animate({
  'marginTop':'-2px'
  },200);
  },
  function () {
  $('a',$(this)).stop().animate({
  'marginTop':'-80px'
  },200);
  }
  );
  });
  </script>
  
 
  <ul id="navigation">
  <li class="rss"><a href="#">photoshop </a></li>
  <li class="facebook"><a href="#">Mp3 India</a></li>
  <li class="twitter"><a href="#">Game Online</a></li>
  <li class="googlebookmarks"><a href="#">TV Online</a></li>
  </ul>

CSS

<style>
 ul#navigation {
 position: fixed;
 margin: 0px;
 padding: 0px;
 top: 0px;
 right: 0px;
 list-style: none;
 z-index:999999;
 width:721px;
 }
 ul#navigation li {
 width: 103px;
 display:inline;
 float:left;
 border:0;
 }
 ul#navigation li a {
 display: block;
 float:left;
 margin-top: -2px;
 width: 100px;
 height: 25px;
 background-color:#eeeeee;
 background-repeat:no-repeat;
 background-position:50% 10px;
 border:1px solid #BDDCEF;
 -moz-border-radius:0px 0px 10px 10px;
 -webkit-border-bottom-right-radius: 10px;
 -webkit-border-bottom-left-radius: 10px;
 -khtml-border-bottom-right-radius: 10px;
 -khtml-border-bottom-left-radius: 10px;
 text-decoration:none;
 text-align:center;
 padding-top:80px;
 opacity: 0.96;
 filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
 }
 ul#navigation li a:hover{
 background-color:#CAE3F2;
 }
 ul#navigation li a span{
 letter-spacing:2px;
 font-size:11px;
 color:#60ACD8;
 font-family:trebuchet-ms, arial, tahoma, Sans-Serif;
 font-weight:bold;
 text-shadow: 0 -1px 1px #fff;
 }
 ul#navigation .rss a{
 background-image: url(http://i1188.photobucket.com/albums/z403/pattah121/photoshop-1.png);
 }
 ul#navigation .facebook a {
 background-image: url(http://i1188.photobucket.com/albums/z403/pattah121/musik-1.png);
 }
 ul#navigation .twitter a {
 background-image: url(http://i1188.photobucket.com/albums/z403/pattah121/game-1.png);
 }
 ul#navigation .googlebookmarks a {
 background-image: url(http://i1188.photobucket.com/albums/z403/pattah121/buku.png);
 }
 </style>