ul {  
   margin: 0;  
   padding: 0;  
   }  
li {  
   width: 100px;  
   height: 50px;  
   float: left;  
   color: #191919;  
   text-align: center;  
   overflow: hidden;  
   }  
a {  
   color: #FFF;  
   text-decoration: none;  
   }  
p {  
   padding: 0px 5px;  
   }  
.subtext {  
   padding-top: 15px;  
   }  
.green {  
   background: #6AA63B url('green-item-bg.jpg') top left no-repeat;  
   }  
.yellow {  
   background: #FBC700 url('yellow-item-bg.jpg') top left no-repeat;  
   }  
.red {  
   background: #D52100 url('red-item-bg.jpg') top left no-repeat;  
   }  
.purple {  
   background: #5122B4 url('purple-item-bg.jpg') top left no-repeat;  
   }  
.blue {  
   background: #0292C0 url('blue-item-bg.jpg') top left no-repeat;  
   }

<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.js" type="text/javascript"></script>

<script src="jquery.easing.1.3.js" type="text/javascript"></script>

<script type="text/javascript">  
$(document).ready(function(){  
   $("a").click(function(){  
   $(this).blur();  
   });  
   $("li").mouseover(function(){  
   $(this).stop().animate({height:'150px'},{queue:false, duration:600, easing: 'easeOutBounce'})  
   });  
   $("li").mouseout(function(){  
   $(this).stop().animate({height:'50px'},{queue:false, duration:600, easing: 'easeOutBounce'})  
   });  
});  
</script>

<ul>  
   <li class="green">  
   <p><a href="#">Пункт №1</a></p>  
   <p class="subtext">Бла-бла</p>  
   </li>  
   <li class="yellow">  
   <p><a href="#">Пункт №2</a></p>  
   <p class="subtext">Бла-бла</p>  
   </li>  
   <li class="red">  
   <p><a href="#">Пункт №3</a></p>  
   <p class="subtext">Бла-бла</p>  
   </li>  
   <li class="blue">  
   <p><a href="#">Пункт №4</a></p>  
   <p class="subtext">Бла-бла</p>  
   </li>  
   <li class="purple">  
   <p><a href="#">Пункт №5</a></p>  
   <p class="subtext">Бла-бла</p>  
   </li>  
</ul>