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>