title: CSS transition does not work on top property in FF
body: <p>I have following HTML:</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;
          &lt;a href="#"&gt;
              &lt;h2&gt;title&lt;/h2&gt;
          &lt;/a&gt;
      &lt;/li&gt;
       &lt;li&gt;
          &lt;a href="#"&gt;
              &lt;h2&gt;title&lt;/h2&gt;
          &lt;/a&gt;
      &lt;/li&gt;
       &lt;li&gt;
          &lt;a href="#"&gt;
              &lt;h2&gt;title&lt;/h2&gt;
          &lt;/a&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>ul {
      list-style: none;  
      text-align: center;
  }
  ul li {
      position: relative;
      float: right;
      margin-right: 20px;
      width: 30%;
  }
  ul li {
      transition: all 0.3s;
  }
  ul li:hover {
      top: -10px;
  }
  ul li&gt; a{
      color: red;
  }
  </code></pre>
  
  <p>The question is the transition does not work with moz, it works on webkit. How do I implement this in a cross browser way? </p>
  
  <p><a href="http://jsfiddle.net/am6xb/4/" rel="nofollow noreferrer"><strong>DEMO</strong></a></p>