Javascript/CSS slow motion menu on IE7

[jackychan]

I've got a sort of menu in a project that I'm working to, that is used in IE7 browsers only.HTML:\[code\]<table class="tabellaquad" cellspacing="20"> <tr> <td> <a class="item" href="http://stackoverflow.com/questions/14607238/index.jsp?quad=1"> <div align="center" class="tabquad"> ONE </div> </a> </td> <td> <a class="item" href="http://stackoverflow.com/questions/14607238/index.jsp?quad=7"> <div align="center" class="tabquad"> 1 </div> </a> </td> <td> <a class="item" href="http://stackoverflow.com/questions/14607238/index.jsp?quad=4"> <div align="center" class="tabquad"> RED </div> </a> </td> </tr> <tr> <td> <a class="item" href="http://stackoverflow.com/questions/14607238/index.jsp?quad=2"> <div align="center" class="tabquad"> TWO </div> </a> </td> <td> <a class="item" href="http://stackoverflow.com/questions/14607238/index.jsp?quad=8"> <div align="center" class="tabquad"> 2 </div> </a> </td> <td> <a class="item" href="http://stackoverflow.com/questions/14607238/index.jsp?quad=5"> <div align="center" class="tabquad"> BLUE </div> </a> </td> </tr> <tr> <td> <a class="item" href="http://stackoverflow.com/questions/14607238/index.jsp?quad=3"> <div align="center" class="tabquad"> THREE </div> </a> </td> <td> <a class="item" href="http://stackoverflow.com/questions/14607238/index.jsp?quad=9"> <div align="center" class="tabquad"> 3 </div> </a> </td> <td> <a class="item" href="http://stackoverflow.com/questions/14607238/index.jsp?quad=6"> <div align="center" class="tabquad"> YELLOW </div> </a> </td> </tr> <tr> <td> </td> <td> <a class="item" href="http://stackoverflow.com/questions/14607238/index.jsp?quad=10"> <div align="center" class="tabquad"> 4 </div> </a> </td> <td> </td> </tr> <tr> <td> </td> <td> <a class="item" href="http://stackoverflow.com/questions/14607238/index.jsp?quad=11"> <div align="center" class="tabquad"> 5 </div> </a> </td> <td> </td> </tr></table>\[/code\]CSS:\[code\].tabellaquad{margin:auto;position:relative;width:40%;text-align:center;}.tabquad{color:white;margin:auto;position:relative;border:2px solid #000;border-color:rgb(82,115,154);width:200px;height:30px;text-align:center;padding-top:10px;top:25px;background-color:rgb(0,56,130);}.tabquad:hover{background-color:rgb(49,87,132);cursor: hand;}\[/code\]What I would like to do is having 3 "father" button (a \[code\]<div>\[/code\]), for each column. When I click on one of them, the buttons must appear slowly under it (depending on the column).Is there any CSS/JS script that I can use for doing this? My main issue is that I have to use IE7, I googled for something, not finding anything useful.Here you can find some jsfiddle example.