CSS animation of position property not working

Question

So I got this snippet of code from my textbook and tried it out in my browser and the position transition for the top property is an instant jump instead of a slow transition down 50 pixels. I did some googling online and it seems like transitioning the position property is possible but for some reason it isn't working in my code.

Here is the jsfiddle version.

Here is the CSS related markup:

body {
  font-family: Tahoma, Verdana, Geneva, sans-serif;
  margin: 6em;
  font-weight: bold;
}
ul {
  list-style-type:none;
  margin: 0;
  padding: 0;
}
li {
  float: left;
}
a {
   display: block;
  width: 6em;
  margin: 0 5px;
  padding: .5em 1em;
  text-decoration: none;
  text-align: center;
  color: #fff;
  background-color: rgb(190, 190, 190);
  border: 2px solid rgb(175,175,175);
  border-radius: 6px;
  text-shadow: #666 .1em .1em .1em;
  box-shadow: 0 5px 3px rgba(0,0,0,.5);
  position: relative;
  -webkit-transition: background-color 0.2s, border-color 0.2s, top 25s, box-shadow 0.2s;
  -moz-transition: background-color 0.2s, border-color 0.2s, top 25s, box-shadow 0.2s;
  -o-transition: background-color 0.2s, border-color 0.2s, top 25s, box-shadow 0.2s;
  -ms-transition: background-color 0.2s, border-color 0.2s, top 25s, box-shadow 0.2s;
  transition: background-color 0.2s, border-color 0.2s, top 25s, box-shadow 0.2s;
}

a:hover, a:focus {
  background-color: #fdca00;
  border-color: #fda700;
}
a:active {
  top: 100px;
  box-shadow: 0 1px 2px rgba(0,0,0,.5);
}

Here is the HTML related markup:

<ul>
<li><a href="">Men</a></li>
<li><a href="">Women</a></li>
<li><a href="">Kids</a></li>
<li><a href="">SALE</a></li>
</ul>

Answer 1

here the correct fiddle
I just added top:0px in the tag a

a {
   display: block;
  width: 6em;
  margin: 0 5px;
  padding: .5em 1em;
  text-decoration: none;
  text-align: center;
  color: #fff;
  background-color: rgb(190, 190, 190);
  border: 2px solid rgb(175,175,175);
  border-radius: 6px;
  text-shadow: #666 .1em .1em .1em;
  box-shadow: 0 5px 3px rgba(0,0,0,.5);
  position: relative;
   top: 0px;
  -webkit-transition: background-color 0.2s, border-color 0.2s, top 1s, box-shadow 0.2s;
  -moz-transition: background-color 0.2s, border-color 0.2s, top 1s, box-shadow 0.2s;
  -o-transition: background-color 0.2s, border-color 0.2s, top 1s, box-shadow 0.2s;
  -ms-transition: background-color 0.2s, border-color 0.2s, top 1s, box-shadow 0.2s;
  transition: background-color 0.2s, border-color 0.2s, top 1s, box-shadow 0.2s;
}

Hope is what are you looking for :)