Converting jQuery easing code from ul li to table

Here I have a jQuery easing in/out feature, and I was trying to convert it from ul li to table instead, it didn't work for me.

   $(document).ready(function(){
      $('.topnav li').find('a[href]').parent().each(function() {
        var li = $(this),
        a = li.find('a'),
        div = $('<div>' + '<\/div>');

        li.hover(function() {
        a.stop().animate({marginTop: '-135'}, 600, "easeOutBack");
      },
      function() {
        a.stop().animate({marginTop: '0'}, 500, "easeOutBack");
      })
      .append(div);
    });
  });

I'm wondering what changes do I have to make other than replacing my main ul class from .topnav li to .topnav tr td

I used this html before:

 <ul class="topnav">
    <li><a href="#">my link</a><div>hello</div></li>
 </ul>

then I changed it to table like this:

<table class="topnav">
<tr>
<td><a href="#">my link</a><div>hello</div></td>
</tr>
</table>

but so far no luck. didn't work at all. Possibly there is something missing or something is wrong in the changes...

Any idea?

Anchor is by default inline element, if you change its style to display:block; then the animation is visible.

table td a {
    display:block;
    margin-bottom: 115px;
}
table td {
    height:135px;
    float:left;
    overflow:hidden;
}

jsfiddle / another alternative